[JavaScript] 배열에서 객체(오브젝트)의 위치를 찾는 방법 - indexOf 대신 findIndex 활용하기

JavaScript에서 배열에 값이 포함되어 있는지, 또는 값이 배열 내에서 어느 위치에 있는지 확인하기 위해 흔히 indexOf 메서드를 사용합니다. 그러나 배열의 값이 객체로 이루어져 있을 경우, indexOf는 원하는 결과를 제공하지 않습니다. 객체는 참조형 데이터이기 때문에, 동일한 구조의 객체라도 서로 다른 메모리 주소를 가지고 있기 때문입니다. 이런 경우에는 findIndex 메서드를 사용하는 것이 적합합니다.

 

1. 기본적인 indexOf의 한계

indexOf는 원시 데이터 타입(문자열, 숫자 등)으로 이루어진 배열에서 특정 값을 찾을 때는 잘 작동합니다.

// 문자열 배열에서 indexOf 사용
const fruits = ["apple", "banana", "cherry"];
const index = fruits.indexOf("banana");
console.log(index);  // 출력: 1

 

하지만 배열이 객체로 이루어져 있다면, indexOf는 객체 내부 값을 비교하지 않고 객체의 참조값을 비교합니다.

// 객체 배열에서 indexOf 사용
const fruits = [
  { name: "apple", color: "red" },
  { name: "banana", color: "yellow" },
  { name: "cherry", color: "red" }
];

const target = { name: "banana", color: "yellow" };
const index = fruits.indexOf(target);
console.log(index);  // 출력: -1 (찾지 못함)

 

위 코드에서 target 객체는 배열에 포함된 것처럼 보이지만, indexOf는 참조값을 비교하므로 동일한 객체라고 인식하지 않습니다. 이럴 때는 findIndex를 사용해야 합니다.

---

2. findIndex를 사용하여 객체 배열에서 위치 찾기

findIndex는 배열 내의 각 요소에 대해 제공된 테스트 함수가 **참(true)**를 반환하는 첫 번째 요소의 인덱스를 반환합니다. 이를 통해 객체 배열에서 특정 조건을 만족하는 객체의 위치를 찾을 수 있습니다.

예제:

// 객체 배열에서 findIndex 사용
const fruits = [
  { name: "apple", color: "red" },
  { name: "banana", color: "yellow" },
  { name: "cherry", color: "red" }
];

const index = fruits.findIndex(fruit => fruit.name === "banana");

console.log(index);  // 출력: 1

 

위 코드에서 findIndex는 배열을 순회하면서 각 객체의 name 속성이 "banana"인지를 확인하고, 조건을 만족하는 첫 번째 객체의 인덱스를 반환합니다.

 

3. 조건이 여러 개일 때

findIndex를 사용하면 여러 조건을 함께 처리할 수 있습니다. 예를 들어, name과 color가 모두 일치하는 객체를 찾고 싶을 때는 아래와 같이 구현할 수 있습니다.

const fruits = [
  { name: "apple", color: "red" },
  { name: "banana", color: "yellow" },
  { name: "cherry", color: "red" }
];

const index = fruits.findIndex(fruit => fruit.name === "cherry" && fruit.color === "red");

console.log(index);  // 출력: 2

 

&& 연산자를 사용하여 두 가지 조건을 모두 만족하는 객체를 찾을 수 있습니다.

---

4. 객체 배열에서 값을 직접 비교할 때

객체가 동일한 속성 값을 가지고 있는지 비교하고 싶다면, findIndex에 비교 함수를 사용할 수 있습니다. 하지만 객체가 매우 복잡하거나 중첩된 구조를 가질 경우, 이를 처리하기 위한 별도의 비교 함수가 필요할 수 있습니다.

다음은 비교 함수를 사용하여 동일한 속성을 가진 객체의 위치를 찾는 예제입니다.

// 객체 비교를 위한 헬퍼 함수
function isEqual(obj1, obj2) {
  return obj1.name === obj2.name && obj1.color === obj2.color;
}

const fruits = [
  { name: "apple", color: "red" },
  { name: "banana", color: "yellow" },
  { name: "cherry", color: "red" }
];

const target = { name: "banana", color: "yellow" };
const index = fruits.findIndex(fruit => isEqual(fruit, target));

console.log(index);  // 출력: 1

 

isEqual 함수는 두 객체가 같은 속성 값을 가지고 있는지 확인하며, findIndex는 이 함수를 이용해 배열에서 조건을 만족하는 객체의 인덱스를 반환합니다.

---

JavaScript에서 배열에 객체가 포함된 경우, 특정 조건을 만족하는 객체의 위치를 찾기 위해서는 indexOf 대신 findIndex를 사용하는 것이 좋습니다. findIndex는 조건을 기반으로 객체 배열을 탐색하여 원하는 값을 손쉽게 찾을 수 있는 유용한 메서드입니다.