blog

JavaScript findIndex와 indexOf의 차이

Front-end / JavaScript#JavaScript#Array#findIndex#indexOf

indexOf: 값으로 찾기

배열에서 주어진 값과 일치하는 첫 요소의 인덱스를 반환한다. 비교는 엄격 동등(===)이다.

const numbers = [1, 2, 3, 4];
numbers.indexOf(3); // 2
numbers.indexOf(5); // -1

객체는 참조를 비교하므로, 내용이 같아도 다른 객체면 찾지 못한다.

const users = [{ id: 1 }, { id: 2 }];
users.indexOf({ id: 1 }); // -1 (다른 참조)

===는 NaN === NaN이 false이므로 NaN도 찾지 못한다.

[NaN].indexOf(NaN); // -1
[NaN].includes(NaN); // true (SameValueZero 비교)

findIndex: 조건으로 찾기

콜백이 참을 반환하는 첫 요소의 인덱스를 반환한다.

const users = [{ id: 1 }, { id: 2 }];
users.findIndex((user) => user.id === 1); // 0
users.findIndex((user) => user.id === 3); // -1

[NaN].findIndex(Number.isNaN); // 0

비교

항목indexOffindIndex
인자찾을 값조건 콜백
비교 방식===콜백에서 직접 정의
객체 내용으로 찾기❌✅
NaN 찾기❌✅
시작 위치 지정두 번째 인자 fromIndex없음
없을 때-1-1

함께 쓰는 메서드

  • 마지막 요소부터 찾기: lastIndexOf, findLastIndex(ES2023)
  • 인덱스가 아니라 요소 자체가 필요하면: find, findLast
  • 존재 여부만 필요하면: 값은 includes, 조건은 some