JavaScript findIndex() 메서드란?
JavaScript의 findIndex() 메서드는 배열에서 주어진 조건(콜백 함수)을 통과하는 첫 번째 요소의 인덱스를 반환합니다. 만약 어떤 요소도 조건을 만족하지 않으면 -1이 반환됩니다.
findIndex()는 조건에 맞는 요소를 발견하는 즉시 배열 순회를 중단하기 때문에, 대용량 배열에서도 효율적으로 동작한다는 장점이 있습니다.
문법(Syntax)
array.findIndex(function(currentValue, index, arr), thisValue)
매개변수 설명
- currentValue : 현재 처리 중인 배열 요소의 값 (필수)
- index : 현재 처리 중인 요소의 인덱스 (선택 사항)
- arr : findIndex()가 호출된 배열 객체 자체 (선택 사항)
- thisValue : 콜백 함수 내부에서 this로 사용할 값 (선택 사항)
예제 1 : 최고 랭크 플레이어의 인덱스 찾기
다음은 400점 이상의 점수를 가진 플레이어, 즉 최고 랭크에 해당하는 요소의 인덱스를 찾는 예제입니다.
<!DOCTYPE html>
<html>
<body>
<h2>랭킹</h2>
<button onclick="display()">결과 보기</button>
<p id="demo"></p>
<p>가장 높은 랭크를 가진 플레이어의 인덱스를 찾습니다.</p>
<script>
var points = [100, 150, 200, 250, 300, 400];
function topRank(points) {
return points >= 400;
}
function display() {
document.getElementById("demo").innerHTML = "index = "+points.findIndex(topRank);
}
</script>
</body>
실행 결과
"결과 보기" 버튼을 클릭하면 아래와 같이 인덱스가 화면에 출력됩니다.
배열 [100, 150, 200, 250, 300, 400]에서 400 이상인 요소는 마지막 위치에 있으므로 index = 5가 반환됩니다.
예제 2 : 특정 점수를 가진 플레이어의 인덱스 찾기
이번에는 특정 랭크 점수(200점)에 해당하는 플레이어의 인덱스를 찾아보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h2>랭킹</h2>
<button onclick="display()">결과 보기</button>
<p id="demo"></p>
<p>특정 랭크 점수를 가진 플레이어의 인덱스를 찾습니다.</p>
<script>
var points = [100, 150, 200, 250, 300, 400];
function topRank(points) {
return points == 200;
}
function display() {
document.getElementById("demo").innerHTML = "index = "+points.findIndex(topRank);
}
</script>
</body>
실행 결과
위 코드에서 "결과 보기" 버튼을 클릭하면 다음과 같은 결과를 확인할 수 있습니다.
200점인 요소는 배열의 세 번째 위치에 있으므로 index = 2가 반환됩니다.
핵심 정리
- findIndex()는 조건을 만족하는 첫 번째 요소의 인덱스만 반환하고, 이후 요소는 검사하지 않습니다.
- 조건을 만족하는 요소가 하나도 없으면 -1을 반환합니다.
- 빈 배열에 대해 호출해도 -1을 반환하며, 원본 배열은 변경되지 않습니다.