[Javascript] 객체 배열에서 특정 원소 찾기 - findIndex(), find()

박기영·2023년 5월 1일

Javascript

목록 보기

37/45

보통의 경우, 백엔드에서 넘어오는 정보는 객체로 이루어진 배열인 경우가 많다.
이러한 배열에서 어떻게 해야지 내가 원하는 정보를 찾아낼 수 있을까?

아래에 주어진 객체 배열을 가지고 진행해보자.

const data = [
  {
    name: "Bohun",
    age: 24,
    job: "AI researcher",
  },
  {
    name: "Rki0",
    age: 26,
    job: "Frontend developer",
  },
  {
    name: "Han",
    age: 21,
    job: "Backend developer",
  },
  {
    name: "Kiyoung",
    age: 26,
    job: "Fullstack developer",
  },
];

findIndex()

특정 객체를 찾아내는 방법 중 하나는,
특정 조건을 만족하는 원소의 인덱스 번호를 알려주는 메서드를 사용하는 것이다.
사용법은 아래와 같다.

arr.findIndex(callback(element[, index[, array]])[, thisArg])

콜백 함수에 탐색 조건을 입력해주면 된다.
예시를 통해 살펴보자.

const test1 = data.findIndex((item) => item.name === "Kiyoung");
console.log(test1); // 3

조건에 맞는 객체의 인덱스 번호를 알려주는 것을 확인할 수 있다.

그렇다면, 조건에 부합하는 객체가 여러 개라면 어떻게 될까?

가장 앞에 있는 요소의 인덱스를 반환

그 해답은 아래 예시를 통해 확인할 수 있다.

const test2 = data.findIndex((item) => item.age === 26);
console.log(test2); // 1

실험 데이터에서 age가 26인 객체는 2개이다.
그 중, 가장 앞에 있는 객체의 인덱스만 출력이 되는 것이 확인된다.
즉, indexOf() 메서드와 동일하게 작동한다는 것을 알 수 있다.

존재하지 않는 경우는 -1 반환

만약 조건에 맞는 데이터가 존재하지 않는 경우라면 어떻게 될까?
이 또한, indexOf() 메서드와 동일하다.

const test3 = data.findIndex((item) => item.job === "student");
console.log(test3); // -1

조건에 부합하는 요소가 없는 경우 -1을 반환한다.

자, 여기까지 findIndex() 메서드를 통해 객체를 찾아내는 방법을 알아봤다.
그럼...객체를 찾기위해 인덱스를 찾아내고, 그 인덱스로 다시 접근해야하는 귀찮은 일을 매번 해야할까?

find()

그럴리가 없다. 객체 그 자체를 탐색할 수 있는 방법이 있다.
사용법은 아래와 같다.

arr.find(callback[, thisArg])

이해하기 굉장히 편리한게..findIndex()와 다른 점이
조건에 맞는 객체가 없는 경우 -1이 아니라 undefined를 반환하는 것 밖에 없다.

그래서 예시만 살펴보기로 한다.

const test1 = data.find((item) => item.name === "Kiyoung");
console.log(test1); // { name: 'Kiyoung', age: 26, job: 'Fullstack developer' }

const test2 = data.find((item) => item.age === 26);
console.log(test2); // { name: 'Rki0', age: 26, job: 'Frontend developer' }

const test3 = data.find((item) => item.job === "student");
console.log(test3); // undefined