JavaScript/JavaScript basics
[JavaScript] find와 findIndex에 대해 알아보자
zenghyun
2023. 3. 16. 10:53
ES5에서는 배열 내의 검색을 위해서 indexOf()라는 배열 메서드를 사용했습니다. ES6에서는 좀 더 강력한 배열 검색을 지원하기 위해서 find(), findIndex() 두가지의 새로운 메서드를 지원합니다. 기존에 indexOf가 배열 내의 특정 값을 찾는데에 사용되었다면, find, findIndex는 callback 함수를 통해서 좀 더 복잡한 조건의 검색이 가능합니다.
[ Array.prototype.find() ]
- find() 메소드는 주어진 테스트 함수의 조건을 만족하는 첫 번째 요소 값을 반환합니다.
- 조건에 맞는 요소를 찾을 수 없다면 undefined를 반환합니다.
- find()는 호출되는 배열을 변경하지 않습니다.
1 2 3 | const find = arr.find((currentValue, idx, datas) => { return thisValue; }); | cs |
Parameter | Description |
() => / function도 가능 | (필수) 배열의 각 엘리먼트에 대해 실행할 함수 |
currentValue | (필수) 배열내에서 순차적으로 입력되는 엘리먼트 |
index | (옵션) 현재 엘리먼트의 배열 내 index |
array | (옵션) 현재 엘리먼트가 속한 배열 |
thisValue | (옵션) 함수 내부에서 사용될 this에 대한 값 |
[ 예제 ]
1 2 3 | var arr = [1,5,6,3,4,7]; var even = arr.find((item)=> item%2 === 0 ); console.log(even); // 6 | cs |
메소드를 살펴보면, ES5의 Array.prototype.filter와 비슷한 형태, 비슷한 기능을 가진다는 것을 알 수 있습니다. 다만, 다음과 같은 차이가 있습니다.
- filter: 조건을 만족하는 모든 요소를 배열 형태로 반환
- find: 조건을 만족하는 하나의 요소만을 반환
만약, 값이 존재하지 않을 경우 undefined를 반환합니다.
1 2 3 | let arr = [1,5,6,3,4,7]; let num = arr.find((item)=> item > 10); console.log(num); // undefined | cs |
또한, 단순 배열뿐만 아니라 객체 배열등 다양한 형태의 배열에 대해서도 find 구문을 사용할 수 있습니다.
1 2 3 4 | 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} | cs |
[ Array.prototype.findIndex() ]
- findIndex() 메서드는 주어진 함수를 통과한 첫 번째 요소의 인덱스 값을 반환합니다.
- 조건에 맞는 요소를 찾을 수 없다면 -1을 반환합니다.
- findIndex()는 호출되는 배열을 변경하지 않습니다.
1 2 3 4 | const findIndex = arr.findIndex((currentValue, idx, datas) => { return thisValue; }); | cs |
※ 인자는 Array.prototype.find()와 동일합니다.
사실상 Array.prototype.find()와 동일하며, 값 대신 인덱스를 반환한다는 차이만 있습니다.
[ 예제 ]
1 2 3 4 5 6 | 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 | cs |
조건을 만족하는 값이 없는 경우에는 -1을 반환합니다.
1 2 3 4 5 6 | 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 | cs |