find 메서드는 자신을 호출한 배열의 요소를 순회하면서 자신을 호출한 배열의 요소를 순회하면서 조건을 만족하는 요소, 즉 반환값이 true인 첫 번째 요소를 반환한다. 콜백함수가 true를 반환할때 까지 배열의 요소를 순회하며 일치하는 요소가 없을 시엔 undefined를 반환한다. ES6에서 도입되었다.
find 메서드는 호출한 배열의 요소값과 요소값의 인덱스, 배열 자체인 this 총 3개의 인자를 받을 수 있다.
// 배열 안에 "Jin"이 존재하는지 확인하기
const users = ['Jin', 'Koo', 'Park', 'Lee'];
users.find(item => item === 'Jin'); // "Jin"
// 배열 안에 나이가 29인 사람 찾기
const developer = [
{ name: 'Lee', age: 29 },
{ name: 'Kim', age: 25 },
{ name: 'Yoon', age: 30 },
{ name: 'Im', age: 27 },
];
developer.find(item => item.age === 29); // { age: 29, name: "Lee" }
// 인덱스가 2인 요소 찾기
const fruits = ['apple', 'grape', 'melon', 'lemon'];
fruits.find((item, index) => index === 2); // "melon"
// true인 요소가 존재하지 않을 때
const fruits = ['apple', 'grape', 'melon', 'lemon'];
fruits.find(item => item === 'berry'); // undefined
findIndex 메서드는 자신을 호출한 배열의 요소를 순회하면서 조건을 만족하는 요소, 즉 반환값이 true인 첫 번째 요소의 인덱스를 반환한다. 만족하는 요소가 없을 시엔 -1을 반환한다. ES6에서 도입되었다.
findIndex는 find와 마찬가지로 호출한 배열의 요소값과 요소값의 인덱스, 배열 자체인 this 총 3개의 인자를 받을 수 있다.
// 배열 안에 나이가 29인 사람 찾기
const developer = [
{ name: 'Lee', age: 29 },
{ name: 'Kim', age: 25 },
{ name: 'Yoon', age: 30 },
{ name: 'Im', age: 27 },
];
developer.findIndex(item => item.age === 29); // 0
// 배열 안에 "lemon"의 인덱스 찾기
const fruits = ['apple', 'grape', 'melon', 'lemon'];
fruits.findIndex(item => item === 'lemon'); // 3
// 배열 안에 일치하는 요소가 없을 경우
const fruits = ['apple', 'grape', 'melon', 'lemon'];
fruits.findIndex(item => item === 'banana'); // -1