[JavaScript] find와 findIndex에 대해 알아보자

 

ES5에서는 배열 내의 검색을 위해서 indexOf()라는 배열 메서드를 사용했습니다. ES6에서는 좀 더 강력한 배열 검색을 지원하기 위해서 find(), findIndex() 두가지의 새로운 메서드를 지원합니다. 기존에 indexOf가 배열 내의 특정 값을 찾는데에 사용되었다면, find, findIndex는 callback 함수를 통해서 좀 더 복잡한 조건의 검색이 가능합니다.

[ Array.prototype.find() ] 

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

 

const find = arr.find((currentValue, idx, datas) => {
    return thisValue; 
});

 

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

 

[ 예제 ]

 

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를 반환합니다.

 

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

 

 

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

 

let peopleArr = [{name: 'Max', age: 27},{name: 'Jojn', age: 25}, {name: 'Jason', age: 20}];
 
let findInfo = objArr.find((item)=> item.age<24);
console.log(findInfo) // {name: 'Jason', age: 20}

 

 

 

---

 

[ Array.prototype.findIndex() ] 

 

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

 

const findIndex = arr.findIndex((currentValue, idx, datas) => {
    return thisValue; 
});
 

 

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

 

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

 

[ 예제 ]

 

let arr = [1,5,6,3,4,7];
let even = arr.find((item)=> item%2 === 0 );
console.log(even); // 6
 
let evenIndex = arr.findIndex((item) => item%2 === 0);
console.log(evenIndex); // 2 : '6'의 배열 내 index

 

 

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

 

let arr = [1,5,6,3,4,7];
let num = arr.find((item)=> item > 10);
console.log(num); // undefined
 
let numIndex = arr.findIndex((item) => item>10);
console.log(numIndex); // -1