[JavaScript]특정 조건을 만족하는 배열의 인덱스 가져오는 방법

특정 조건을 만족하는 배열의 인덱스 가져오는 방법

이번 포스팅은 JavaScript에서 특정 조건을 만족하는 배열의 인덱스를 가져오는 몇 가지 방법을 소개합니다.

---

방법 1. findIndex 메서드

가장 잘 알려져 있는 방법으로 배열의 findIndex() 메서드를 사용하는 것입니다.

 

findIndex() 메서드의 매개 변수로 특정 조건식에 대해 Boolean 값을 반환하는 콜백 함수를 전달하면, 특정 조건에 해당하는 인덱스를 반환합니다.

 

다음 예제는 숫자 타입의 배열에서 10보다 큰 요소의 인덱스를 가져옵니다.

const numArray = [0, 5, 15, 10];
const findIndex = numArray.findIndex((num) => num > 10);

console.log(findIndex); // 2

 

findIndex() 메서드는 한 가지 문제점이 존재하는데, 특정 조건을 만족하는 요소가 여러 개인 경우 모든 인덱스를 가져올 수 없다는 것입니다.

 

다음 예제는 findIndex() 메서드의 문제점을 보여줍니다.

const numArray = [20, 40, 60, 80];
const findIndex = numArray.findIndex((num) => num > 10);

console.log(findIndex); // 0

10보다 큰 요소가 여러 개 존재하지만, findIndex() 메서드는 시작 위치(0 번째 인덱스)와 가장 가까운 인덱스만 반환합니다.

---

방법 2. 반복문

특정 조건을 만족하는 모든 인덱스를 가져오는 가장 심플한 방법으로 반복문을 사용할 수 있습니다.

 

[특정 조건을 만족하는 모든 인덱스를 가져오는 방법]

순서 1. 빈 배열을 생성합니다.

순서 2. 배열을 순회하여 특정 조건을 만족하면, 빈 배열에 인덱스를 추가합니다.

 

다음 예제는 반복문을 사용하여 배열의 요소가 특정 조건을 만족하는 경우 인덱스를 새로운 배열에 추가합니다.

const numArray = [0, 5, 15, 10, 20, 40, 8];
// 특정 조건을 만족하는 배열의 인덱스를 가지는 배열을 생성합니다.
const findIndexArray = [];

for(index = 0; index < numArray.length; index++) {
  // 특정 조건을 만족하면 새로운 배열에 인덱스를 추가합니다.
  if(numArray[index] > 10) {
    findIndexArray.push(index);
  }
}

console.log(findIndexArray);

[실행 결과]

[2, 4, 5]

---

방법 3. map 메서드와 filter 메서드

세 번째 방법으로 map() 메서드와 filter() 메서드를 조합하여 특정 조건을 만족하는 요소의 모든 인덱스를 가져올 수 있습니다.

 

[특정 조건을 만족하는 모든 인덱스를 가져오는 방법]

순서 1. 배열에 map() 메서드를 호출하여 특정 조건을 만족하면 index를 반환하고 그렇지 않으면, -1을 반환하도록 합니다.

순서 2. map() 메서드 결과에 filter() 메서드를 호출하여 -1이 아닌 요소만 필터링합니다.

 

다음 예제는 map() 메서드와 filter() 메서드를 사용하여 배열의 요소가 특정 조건을 만족하는 경우 해당 인덱스로 구성된 배열을 생성합니다.

const numArray = [0, 5, 15, 10, 20, 40, 8];
const findIndexArray = numArray
  .map((item, index) => {
    if(item > 10) return index;
    else return -1;
  })
  .filter((item) => item !== -1);

console.log(findIndexArray);

[실행 결과]

[2, 4, 5]

---

방법 4. reduce 메서드

마지막 방법으로 reduce() 메서드를 사용하여 특정 조건을 만족하는 요소의 모든 인덱스를 가져올 수 있습니다.

 

[특정 조건을 만족하는 모든 인덱스를 가져오는 방법]

순서 1. 배열에 reduce() 메서드를 호출하여 배열을 순회하며, 누적 값(arr)을 빈 배열로 초기화합니다.

순서 2. reduce() 메서드의 콜백 함수에서 배열의 요소가 특정 조건을 만족하면, 누적 값(arr)에 현재 인덱스를 추가 후 반환합니다.

순서 3. 배열의 순회가 끝나면, reduce() 메서드는 최종 누적 값(arr)을 반환합니다.

 

다음 예제는 reduce() 메서드를 사용하여 배열의 요소가 특정 조건을 만족하는 경우 해당 인덱스로 구성된 배열을 생성합니다.

const numArray = [0, 5, 15, 10, 20, 40, 8];
const findIndexArray = numArray.reduce((arr, item, index) => {
  // 배열의 요소가 특정 조건을 만족하면 누적 값(arr)에 인덱스를 추가합니다.
  if(item > 10) { 
    arr.push(index);
  }
  return arr;
}, []); // 누적 값(arr)의 초기값을 빈 배열로 설정합니다.


console.log(findIndexArray);

[실행 결과]

[2, 4, 5]