[JavaScript] find(), findIndex() 함수 알아보기

 

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

 

1. find()

find() 함수는 배열에서 특정 조건을 만족하는 요소를 찾아 첫 번째 요소를 반환하는 함수입니다. 만약 조건에 맞는 요소가 없다면 undefined를 반환합니다.

배열.find(callbackFn(element, index, array), thisValue));

 

• callbackFn(필수) : 배열의 각 element대해 실행할 함수
• element(필수) : 배열내에서 순차적으로 입력되는 element
  • index(옵션) : 현재 element의 배열 내 index
  • array(옵션) : 현재 element 가 속한 배열
• thisValue (옵션) : 함수 내부에서 사용될 this에 대한 값

const numbers = [1, 2, 3, 4, 5];
const target = 3;
const found = numbers.find(element => element === target);

console.log(found); // 결과: 3


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

console.log(even); // 결과 : 6

---

■ 조건에 맞는 요소를 찾을 수 없다면 undefined를 반환

let arr = [1,3,5,7,9,11];

console.log(arr.find((item)=> item % 2 == 0)); // undefined

---

■ 객체 Property를 이용한 검색

const people = [
    {name: "Park", age: 26},
    {name: "Lee", age: 25},
    {name: "Kim", age: 35}
];

const targetName = "Park";
const person = people.find(obj => obj.name === targetName);

console.log(person); // 출력: {name: 'Park', age: 26}

---

■ 사용자 지정 조건에 따른 검색

const people = [
    {name: "Park", age: 26},
    {name: "Lee", age: 25},
    {name: "Kim", age: 35}
];

let young = people => Math.min(people.age);

console.log(people.find(young)); // 결과 : {name: 'Park', age: 26}

 

 

2. findIndex()

findIndex()는 배열에서 특정 조건을 만족하는 요소를 찾아 첫 번째 요소의 인덱스를 반환하는 함수입니다. 
배열의 각 요소에 대해 콜백 함수를 사용하여 원하는 조건의 요소를 찾습니다. 이 함수는 배열에서 특정 요소의 인덱스를 찾는 데 유용합니다.

 

배열.findIndex(function(currentValue, index, array), thisValue));

let arr = [1,5,6,3,4,7];

let even = arr.findIndex((el) => el % 2 == 0);

console.log(odd); // 결과 : 2

 

find() 함수와 동일한 인자와 동일하며 기능또한 값 대신 Index를 반환한다는 것에만 차이가 있습니다.

 

■ 조건에 맞는 요소를 찾을 수 없다면 -1를 반환

let arr = [1,3,5,7,9,11];

let even = arr.findIndex((el) => el % 2 == 0);

console.log(even); // -1

 

let Person = [
    {name: 'Park', age: 26},
    {name: 'Kim',  age: 22},
    {name: 'Lee',  age: 23},
    {name: 'Choi', age: 23}
];

let idx = Person.findIndex((data) => { return data.age === 23});
let idx2 = Person.findIndex((data) => { return data.name === 'Park'});
let idx3 = Person.findIndex((data) => { return data.age > 26});

console.log(idx); // 2
console.log(idx2); // 0
console.log(idx3); // -1

 

 

 

---

 

Reference

• Mdn web docs
• 모던 JavaScript
• codingeverybody