[ JavaScript ] findIndex와 indexOf의 차이점 알아보기

JavaScript를 사용할 때, 배열에서 특정 값을 찾는 것은 자주 사용되는 작업입니다. 이를 위해 주로 `findIndex`와 `indexOf` 메서드를 활용할 수 있는데, 이 둘은 비슷해 보이지만 중요한 차이점이 있습니다. 이번 글에서는 `findIndex`와 `indexOf`의 차이점을 예제와 함께 알아보겠습니다.

 

findIndex 메서드

---

findIndex는 배열의 각 요소를 콜백 함수로 검사해, 조건을 만족하는 첫 번째 요소의 인덱스를 반환합니다. 만약 조건을 만족하는 요소가 없으면 -1을 반환합니다.

 

사용 방식

---

arr.findIndex(callback(element, index, array), thisArg);

리턴 값

---

콜백 함수의 조건을 만족하는 첫 번째 요소의 인덱스를 반환하며, 없을 경우 -1을 반환합니다.

용도

---

- 특정 조건을 만족하는 요소를 찾을 때 사용합니다.
- 객체나 복잡한 조건으로 요소를 찾고자 할 때 유용합니다.

 

예시

---

const arr = [5, 12, 8, 130, 44];
const result = arr.findIndex(x => x > 10); // 결과: 1 (12가 첫 번째로 조건을 만족)
console.log(result);

위 예시에서는 10보다 큰 첫 번째 요소의 인덱스를 찾기 위해 findIndex를 사용했습니다. 배열 [5, 12, 8, 130, 44]에서 10보다 큰 첫 번째 값은 12이며, 그 인덱스는 1입니다.

 

indexOf 메서드

---

indexOf는 배열에서 정확히 일치하는 값을 찾고, 그 값의 첫 번째 인덱스를 반환합니다. 만약 해당 값이 배열에 없다면 -1을 반환합니다.

사용 방식

---

arr.indexOf(searchElement, fromIndex);

리턴 값

---

배열에서 지정한 값(`searchElement`)과 **일치하는 첫 번째 요소의 인덱스**를 반환하며, 없을 경우 `-1`을 반환합니다.

 

용도

---

- 배열에서 정확한 값을 찾을 때 사용합니다.
- 단순히 값이 있는지 확인하거나, 그 위치를 찾고자 할 때 유용합니다.

예시

---

const arr = [1, 2, 3, 4, 2];
const result = arr.indexOf(2); // 결과: 1 (처음으로 나타나는 2의 인덱스)
console.log(result);

위 예시에서는 배열에서 값 2를 찾아 첫 번째로 나타나는 인덱스를 반환합니다. 결과는 1입니다.

 

findIndex vs indexOf 차이점 요약

---

구분	findIndex	indexOf
비교 방식	콜백 함수로 조건을 통해 검색	정확한 값을 기준으로 검색
리턴 값	조건을 만족하는 첫 번째 요소의 인덱스 (-1은 조건을 만족하지 않음)	지정한 값과 일치하는 첫 번째 인덱스 (-1은 값이 없음)
사용 예	객체나 복잡한 조건으로 요소를 찾고자 할 때	배열에서 특정 값 자체를 찾고자 할 때

결론

---

JavaScript에서 배열을 다룰 때, findIndex와 indexOf를 상황에 맞게 사용하는 것이 중요합니다. findIndex는 콜백 함수를 활용해 조금 더 복잡한 조건으로 요소를 찾을 때 유용하고, indexOf는 단순히 값 자체를 검색할 때 적합합니다. 이 둘의 차이를 이해하면, 코드 작성 시 더욱 효율적이고 가독성 높은 코드를 만들 수 있습니다.