JavaScript Array findIndex() 사용방법

1. JavaScript Array findIndex() 란 무엇인가?

ES6은 findIndex()라는 새로운 메소드를 Array.prototype에 추가했습니다. 이를 통해 제공된 테스트 기능을 충족하는 배열의 첫 번째 요소를 찾을 수 있습니다.

findIndex() 메서드는 테스트 기능을 충족하는 요소의 인덱스를 반환하거나 테스트를 통과한 요소가 없으면 -1을 반환합니다.

 

다음은 findIndex() 메서드의 구문을 보여줍니다.

findIndex(testFn(element[, index[, array]])[, thisArg])

findIndex()는 두 개의 인수를 취합니다.

 

1) testFn

testFn은 요소가 발견되었음을 나타내는 true를 반환할 때까지 배열의 각 요소에 대해 실행하는 함수입니다.

 

testFn은 세 가지 인수를 사용합니다.

• element는 처리 중인 배열의 현재 요소입니다.
• index는 처리 중인 현재 요소의 인덱스입니다.
• 배열은 findIndex()가 호출된 배열입니다.

 

2) thisArg

thisArg는 콜백을 실행할 때 사용할 선택적 객체입니다. thisArg 인수를 생략하면 findIndex() 함수는 undefined를 사용합니다.

 

findIndex()는 testFn이 true로 강제 변환되는 값인 truthy 값을 반환하는 항목을 찾을 때까지 배열의 모든 요소에 대해 testFn을 실행합니다.

 

findIndex()가 그러한 요소를 찾으면 즉시 요소의 인덱스를 반환합니다.

 

2. JavaScript Array findIndex() 사용방법

JavaScript Array findIndex() 메서드를 사용하는 몇 가지 예를 들어 보겠습니다.

 

1) 간단한 배열 예제와 함께 배열 findIndex() 메서드 사용

다음 예제는 ranks 배열에서 숫자 7이 처음 나타나는 인덱스를 반환합니다.

let ranks = [1, 5, 7, 8, 10, 7];
let index = ranks.findIndex(rank => rank === 7);
console.log(index);

Output:

2

 

2) 보다 복잡한 조건에서 Array findIndex() 메서드 사용

이 예에서는 findIndex() 메서드를 사용하여 순위 배열에서 인덱스 2 다음에 숫자 7이 처음 나타나는 인덱스를 가져옵니다.

let ranks = [1, 5, 7, 8, 10, 7];

let index = ranks.findIndex(
    (rank, index) => rank === 7 && index > 2
);

console.log(index);

Output:

5

 

3) 객체 배열과 함께 Array findIndex() 메서드 사용

다음 예제에서는 Array findIndex() 메서드를 사용하여 가격이 1000보다 큰 첫 번째 제품의 인덱스를 찾습니다.

const products = [
  { name: 'Phone', price: 999 },
  { name: 'Computer', price: 1999 },
  { name: 'Tablet', price: 995 },
];

const index = products.findIndex(product => product.price > 1000);

console.log(index); // 1

 

이 자습서에서는 JavaScript 배열 findIndex() 메서드를 사용하여 주어진 테스트를 충족하는 첫 번째 요소를 찾는 방법을 배웠습니다.

 

 

 

Reference: https://www.javascripttutorial.net/es6/javascript-array-findindex/