자바스크립트 기본 문법 – 배열 – 배열 메서드 – 8 – findIndex

작성자 wooah

자바스크립트 기본 문법 – 배열 – 배열 메서드 – 8 – findIndex

배열 메서드 ‘findIndex’란?

자바스크립트에서 배열을 다룰 때 유용한 여러 가지 메서드들이 있습니다. 그 중에서도 ‘findIndex’ 메서드는 배열에서 특정한 조건을 만족하는 요소의 인덱스를 찾는 기능을 제공합니다.

‘findIndex’ 메서드 사용 예시

아래의 예시를 통해 ‘findIndex’ 메서드를 이해해 보겠습니다.

const numbers = [10, 20, 30, 40, 50];

const index = numbers.findIndex((number) => number > 30);

console.log(index);  // 3

위의 코드에서는 ‘numbers’라는 배열에서 30보다 큰 첫 번째 요소의 인덱스를 찾는 예시입니다. ‘findIndex’ 메서드는 콜백 함수를 인자로 받는데, 이 함수는 배열의 각 요소를 순차적으로 검사하며, 조건을 만족하는 첫 번째 요소를 찾을 때까지 호출됩니다. 이때 콜백 함수의 인자로는 배열의 각 요소가 차례대로 전달됩니다. 조건을 만족하는 요소를 찾으면 해당 요소의 인덱스를 반환하고, 찾지 못하면 -1을 반환합니다.

위의 예시에서는 30보다 큰 첫 번째 요소는 40이므로, 40의 인덱스인 3이 반환됩니다.

비유적인 표현을 통한 이해

‘findIndex’ 메서드를 비유적으로 설명하자면, 배열에서 조건을 만족하는 요소를 찾아내는 것은 마치 어떤 길에서 목적지에 도달하기 위해 첫 번째로 만나는 크로스로드의 방향을 선택하는 것과 비슷합니다. 배열의 각 요소를 순차적으로 검사하면서 조건을 확인하고, 조건을 만족하는 첫 번째 요소를 발견하면 해당 요소의 위치(인덱스)를 알려주는 것이죠.

‘findIndex’ 메서드 활용하기

‘findIndex’ 메서드는 유연하게 활용할 수 있습니다. 다양한 조건을 사용하여 원하는 요소를 찾을 수 있습니다. 예를 들어, 객체 배열에서 특정 조건을 만족하는 요소를 찾을 때도 사용할 수 있습니다.

const students = [
  { name: 'Alice', age: 20 },
  { name: 'Bob', age: 22 },
  { name: 'Charlie', age: 25 },
];

const index = students.findIndex((student) => student.age > 20);

console.log(index);  // 1

위의 코드에서는 ‘students’라는 객체 배열에서 나이가 20보다 큰 첫 번째 학생의 인덱스를 찾는 예시입니다. ‘findIndex’ 메서드의 콜백 함수에서는 학생 객체를 받아와서 해당 객체의 ‘age’ 프로퍼티를 확인하여 조건을 검사합니다. 조건을 만족하는 첫 번째 학생은 ‘Bob’이므로, ‘Bob’의 인덱스인 1이 반환됩니다.

주의해야 할 점

‘findIndex’ 메서드를 사용할 때 주의해야 할 몇 가지 사항이 있습니다.

  1. ‘findIndex’ 메서드는 배열의 처음부터 순차적으로 요소를 검사합니다. 따라서 배열이 매우 큰 경우, 검색 성능에 영향을 줄 수 있으니 주의해야 합니다.

  2. ‘findIndex’ 메서드는 조건을 만족하는 첫 번째 요소의 인덱스만 반환합니다. 만약 모든 요소의 인덱스를 찾고 싶다면, ‘filter’ 메서드를 사용하거나 반복문을 활용해야 합니다.

  3. ‘findIndex’ 메서드는 조건을 만족하는 요소를 찾으면 검색을 중단하고 해당 요소의 인덱스를 반환합니다. 따라서 배열에 조건을 만족하는 여러 개의 요소가 있다고 해도, 첫 번째로 만나는 요소의 인덱스만 반환됩니다.

  4. 조건을 만족하는 요소를 찾지 못한 경우, ‘findIndex’ 메서드는 -1을 반환합니다. 따라서 반환된 인덱스가 -1인지 확인하여 조건을 만족하는 요소가 있는지 여부를 판단할 수 있습니다.

‘findIndex’ 메서드를 활용할 때는 위의 주의사항을 염두에 두고 사용해야 합니다.

자바스크립트의 ‘findIndex’ 메서드는 배열에서 조건을 만족하는 첫 번째 요소의 인덱스를 찾는 유용한 기능을 제공합니다. 해당 메서드를 적절히 활용하여 배열에서 원하는 요소를 찾아내는 데 활용해 보세요!

답글 남기기