JavaScript Array.findIndex() 메서드란?
Array.findIndex() 메서드는 제공된 테스트 함수를 통과하는 배열 요소 중 첫 번째 요소의 인덱스를 반환합니다. 이 메서드는 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행하며, 조건을 만족하는 첫 번째 요소를 발견하면 해당 인덱스를 즉시 반환합니다. 만약 조건을 만족하는 요소가 하나도 없다면 -1을 반환합니다.
findIndex()의 동작 방식
findIndex()는 조건을 만족하는 요소를 찾는 순간 나머지 요소는 더 이상 검사하지 않습니다. 이러한 특성 덕분에 불필요한 반복 연산을 줄일 수 있어 성능 면에서도 유리합니다.
또한 findIndex()는 원본 배열을 변경하지 않으며, 빈 배열에 대해서는 항상 -1을 반환한다는 점도 기억해 두면 좋습니다.
기본 구문
arr.findIndex(callback(element, index, array), thisArg)
- callback: 각 요소를 검사할 함수입니다. 현재 요소(element), 현재 인덱스(index), 대상 배열(array)을 인수로 받습니다.
- thisArg (선택 사항): 콜백 함수 실행 시
this로 사용될 값입니다.
실전 예제
다음 예제에서 findIndex() 메서드는 급여 배열의 요소가 주어진 기준값 15000보다 크거나 같은지 확인합니다. 조건을 가장 먼저 만족하는 요소는 17000이므로, 뒤에 있는 28000이나 30000은 검사하지 않고 곧바로 17000의 인덱스인 2를 반환합니다.
코드
<html>
<body>
<p id="findindex"></p>
<script>
var wages = [6000, 10000, 17000, 28000, 30000];
function checkSal(wage) {
return wage >= 15000;
}
document.getElementById("findindex").innerHTML = wages.findIndex(checkSal);
</script>
</body>
</html>실행 결과
2
정리
Array.findIndex()는 조건에 맞는 요소의 위치(인덱스)가 필요할 때 유용한 메서드입니다. 요소 자체가 필요하다면 find(), 조건을 만족하는 모든 요소가 필요하다면 filter()를 함께 활용하면 상황에 맞는 최적의 코드를 작성할 수 있습니다.