JavaScript에서 다른 배열의 값에 따라 배열 요소 추출하기

두 개의 배열이 있다고 가정해 보겠습니다. 예를 들어 다음과 같은 두 배열을 생각할 수 있습니다.

const array1 = ['a','b','c','d','e','f','g','h'];
const array2 = [ 1, 0, 0, 1 , 0, 0, 1, 0];

두 배열은 항상 길이가 같다고 가정합니다. 우리가 작성해야 할 함수는 두 번째 배열에서 특정 값을 인자로 받으면, 첫 번째 배열 중에서 그 값이 위치한 인덱스와 동일한 인덱스에 있는 모든 요소들을 모아 부분 배열(subarray)로 반환하는 함수입니다.

예를 들어 findSubArray(0)을 호출하면 다음과 같은 결과가 반환되어야 합니다.

['b', 'c', 'e', 'f', 'h']

그 이유는 이 요소들이 첫 번째 배열에서 인덱스 1, 2, 4, 5, 7에 위치하고 있으며, 해당 인덱스에는 두 번째 배열에서 0이 존재하기 때문입니다.

이제 이 함수의 코드를 작성해 보겠습니다.

예제 코드

const array1 = ['a','b','c','d','e','f','g','h'];
const array2 = [ 1, 0, 0, 1 , 0, 0, 1, 0];

const findSubArray = (first, second, el) => {
    if(first.length !== second.length){
        return false;
    };
    return second.reduce((acc, val, ind) => {
        if(val === el){
            acc.push(first[ind]);
        };
        return acc;
    }, []);
};

console.log(findSubArray(array1, array2, 0));
console.log(findSubArray(array1, array2, 1));

코드 설명

이 함수는 먼저 두 배열의 길이가 같은지 검사하여, 길이가 다르면 false를 반환합니다. 이후 reduce() 메서드를 사용해 두 번째 배열을 순회하면서 각 요소가 찾고자 하는 값(el)과 일치하는지 확인하고, 일치하는 경우 해당 인덱스에 있는 첫 번째 배열의 요소를 결과 배열에 추가합니다.

출력 결과

콘솔에 출력되는 결과는 다음과 같습니다.

[ 'b', 'c', 'e', 'f', 'h' ]
[ 'a', 'd', 'g' ]

첫 번째 호출에서는 두 번째 배열에서 0이 있는 위치의 요소들이, 두 번째 호출에서는 1이 있는 위치의 요소들이 각각 추출된 것을 확인할 수 있습니다. 이처럼 reduce()를 활용하면 조건에 맞는 인덱스의 요소들을 손쉽게 필터링하여 새로운 배열로 만들 수 있습니다.