[TIL] 배열 고차 함수 - (4) find / findIndex

1. Array.prototype.find

📌 (1) find란?

find 메서드는 자신을 호출한 배열의 요소를 순회하면서 자신을 호출한 배열의 요소를 순회하면서 조건을 만족하는 요소, 즉 반환값이 true인 첫 번째 요소를 반환한다. 콜백함수가 true를 반환할때 까지 배열의 요소를 순회하며 일치하는 요소가 없을 시엔 undefined를 반환한다. ES6에서 도입되었다.

📌 (2) find 인수

find 메서드는 호출한 배열의 요소값과 요소값의 인덱스, 배열 자체인 this 총 3개의 인자를 받을 수 있다.

📌 (3) find 사용하기

// 배열 안에 "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

2. Array.prototype.findIndex

📌 (1) findIndex란?

findIndex 메서드는 자신을 호출한 배열의 요소를 순회하면서 조건을 만족하는 요소, 즉 반환값이 true인 첫 번째 요소의 인덱스를 반환한다. 만족하는 요소가 없을 시엔 -1을 반환한다. ES6에서 도입되었다.

📌 (2) findIndex 인수

findIndex는 find와 마찬가지로 호출한 배열의 요소값과 요소값의 인덱스, 배열 자체인 this 총 3개의 인자를 받을 수 있다.

📌 (3) findIndex 사용하기

// 배열 안에 나이가 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