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
비교
| 항목 | indexOf | findIndex |
|---|---|---|
| 인자 | 찾을 값 | 조건 콜백 |
| 비교 방식 | === | 콜백에서 직접 정의 |
| 객체 내용으로 찾기 | ❌ | ✅ |
NaN 찾기 | ❌ | ✅ |
| 시작 위치 지정 | 두 번째 인자 fromIndex | 없음 |
| 없을 때 | -1 | -1 |
함께 쓰는 메서드
- 마지막 요소부터 찾기:
lastIndexOf,findLastIndex(ES2023) - 인덱스가 아니라 요소 자체가 필요하면:
find,findLast - 존재 여부만 필요하면: 값은
includes, 조건은some