[ES6] 배열 메소드 : find(), findIndex()

ES5에서는 배열 내에 검색을 위해서 indexOf()라는 배열 메소드가 존재했습니다. ES6에서는 좀 더 강력한 배열 검색을 지원하기 위해서 find(), findIndex() 두가지의 새로운 메소드를 지원합니다.

기존의 indexOf가 배열내의 특정 값을 찾는데에 사용되었다면, find, findIndex는 callback 함수를 통해서 좀 더 복잡한 조건의 검색이 가능합니다. 약간은 filter() 메소드와도 비슷한 면이 있어 보입니다.

 

1. Array.prototype.find()

• find() 메소드는 주어진 테스트 함수의 조건을 만족하는 첫 번째 요소 값을 반환합니다.
• 조건에 맞는 요소를 찾을 수 없다면 undefined를 반환합니다.
• find()는 호출되는 배열을 변경하지 않습니다. 

[문법]

arr.find(function(currentValue, index, array), thisValue));

 

Parameter	Description
function	(필수) 배열의 각 엘리먼트에 대해 실행할 함수
- currentValue	(필수) 배열내에서 순차적으로 입력되는 엘리먼트
- index	(옵션) 현재 엘리먼트의 배열 내 index
- array	(옵션) 현재 엘리먼트가 속한 배열
thisValue	(옵션) 함수 내부에서 사용될 this에 대한 값

* index, arr, thisValue에 대한 사용법은 ES5 Array의 Map 부분을 참고하세요!

[예제]

기본적인 예제로 배열에서 최초의 짝수 값을 찾는 예제를 살펴봅니다.

var arr = [1,5,6,3,4,7];
var even = arr.find((item)=> item%2 === 0 );
console.log(even); // 6

 

메소드를 살펴보면, ES5의 Array.prototype.filter와 비슷한 형태, 비슷한 기능을 가진다는 것을 알 수 있습니다. 다만, 다음과 같은 차이가 있습니다.

• filter: 조건을 만족하는 모든 요소를 배열 형태로 반환
• find: 조건을 만족하는 하나의 요소만을 반환

✅ 값이 존재하지 않는 경우

값이 존재하지 않는 경우에는 undefined를 반환합니다.

var arr = [1,5,6,3,4,7];
var over10 = arr.find((item)=> item > 10);
console.log(over10); // undefined

 

✅  객체 Property를 이용한 검색

단순 배열뿐만 아니라 객체 배열 등 다양한 형태의 배열에 대해서도 find 구문을 사용할 수 있습니다.

var objArr = [{name: '철수', age: 10},{name: '영희', age: 10}, {name: '바둑이', age: 2}];

var under5 = objArr.find((item)=> item.age<5);
console.log(under5) // {name: '바둑이', age: 2}

 

2. Array.prototype.findIndex()

• findIndex() 메소드는 주어진 함수를 통과한 첫 번째 요소의 인덱스 값을 반환합니다.
• 조건에 맞는 요소를 찾을 수 없다면 -1을 반환합니다.
• findIndex()는 호출되는 배열을 변경하지 않습니다. 

[문법]

arr.findIndex(function(currentValue, index, array), thisValue));

* 인자는 Array.prototype.find()와 동일합니다.

 

사실상 array.prototype.find()와 동일하며  값 대신 인덱스를 반환한다는 차이만 있습니다. 

[예제]

앞의 find의 경우와 동일한 예제로, 최초의 짝수의 Index를 찾는 예제입니다.

var arr = [1,5,6,3,4,7];
var even = arr.find((item)=> item%2 === 0 );
console.log(even); // 6

var evenIndex = arr.findIndex((item) => item%2 === 0);
console.log(evenIndex); // 2 : '6'의 배열 내 index

 

✅  값이 없는 경우

조건을 만족하는 값이 없는 경우에는 -1을 반환합니다.

var arr = [1,5,6,3,4,7];
var over10 = arr.find((item)=> item > 10);
console.log(over10); // undefined

var over10Index = arr.findIndex((item) => item>10);
console.log(over10Index); // -1