JavaScript에서 값과 인덱스가 일치하는 모든 요소 선택하기

이번 글에서는 숫자 배열을 첫 번째이자 유일한 인수로 받아 처리하는 JavaScript 함수를 작성해 보겠습니다.

함수는 원본 배열을 기반으로 새로운 배열을 만들어 반환해야 하며, 이 새 배열에는 값과 자신의 위치(인덱스)가 일치하는 원본 배열의 요소들만 담기게 됩니다.

핵심 조건: 1 기반 인덱스 사용

여기서 주의할 점은, 일반적으로 사용하는 0 기반(0-based) 인덱스가 아니라 1 기반(1-based) 인덱스를 기준으로 값과 인덱스를 비교해야 한다는 것입니다. 즉, 배열의 첫 번째 요소는 인덱스 1로 간주합니다.

예시

입력 배열이 다음과 같다고 가정해 보겠습니다.

const arr = [45, 5, 2, 4, 6, 6, 6];

각 요소를 1 기반 인덱스와 비교하면 다음과 같습니다.

45 → 인덱스 1 (불일치)
5 → 인덱스 2 (불일치)
2 → 인덱스 3 (불일치)
4 → 인덱스 4 (일치 ✓)
6 → 인덱스 5 (불일치)
6 → 인덱스 6 (일치 ✓)
6 → 인덱스 7 (불일치)

따라서 함수가 반환해야 하는 결과 배열은 다음과 같습니다.

const output = [4, 6];

구현 코드

이 로직을 구현한 코드는 아래와 같습니다. 반복문을 돌면서 각 요소에서 현재 인덱스를 뺀 값이 1이면(즉, 값 = 인덱스 + 1) 결과 배열에 추가하는 방식입니다.

const arr = [45, 5, 2, 4, 6, 6, 6];
const pickSameElements = (arr = []) => {
   const res = [];
   const { length } = arr;
   for(let ind = 0; ind < length; ind++){
      const el = arr[ind];
      if(el - ind === 1){
         res.push(el);
      };
   };
   return res;
};
console.log(pickSameElements(arr));

코드 설명

pickSameElements는 화살표 함수로 정의되며, 매개변수에 기본값 []을 지정해 빈 배열이 전달되어도 안전하게 동작합니다.
배열 구조 분해 할당(const { length } = arr;)으로 배열의 길이를 미리 구해 둡니다.
반복문 내부에서 el - ind === 1 조건을 검사하는데, 이는 0 기반 인덱스 ind를 1 기반 인덱스로 환산하여 비교하는 것과 같습니다.
조건을 만족하는 요소만 res 배열에 담긴 후 최종적으로 반환됩니다.

실행 결과

위 코드를 콘솔에서 실행하면 다음과 같은 출력을 확인할 수 있습니다.

[4, 6]

이처럼 간단한 반복문과 조건문만으로도 값과 인덱스가 일치하는 요소를 손쉽게 필터링할 수 있습니다. 참고로 같은 로직은 filter() 메서드를 활용해 arr.filter((el, i) => el === i + 1)처럼 더 간결하게 표현할 수도 있습니다.