JavaScript에서 두 개의 배열을 하나의 객체로 결합하는 방법

길이가 같은 두 개의 배열이 있을 때, 이 두 배열을 하나의 객체로 매핑하는 함수를 작성해야 하는 경우가 자주 있습니다. 이때 첫 번째 배열의 각 요소는 객체의 키(key)가 되고, 두 번째 배열의 대응되는 요소는 그 키에 해당하는 값(value)이 됩니다.

reduce()를 활용한 해결 방법

가장 깔끔한 접근 방식은 첫 번째 배열에 reduce() 메서드를 사용하면서, 동시에 인덱스를 통해 두 번째 배열의 요소에 접근하는 것입니다. reduce()는 누적기(accumulator)를 활용해 반복적으로 객체를 만들어 나가기 때문에 이런 작업에 특히 적합합니다.

예제 코드

const keys = [
    'firstName',
    'lastName',
    'isEmployed',
    'occupation',
    'address',
    'salary',
    'expenditure'
];
const values = [
    'Hitesh',
    'Kumar',
    false,
    'Frontend Developer',
    'Tilak Nagar, New Delhi',
    90000,
    45000
];
const combineArrays = (first, second) => {
    return first.reduce((acc, val, ind) => {
        acc[val] = second[ind];
        return acc;
    }, {});
};
console.log(combineArrays(keys, values));

코드 설명

• combineArrays는 두 개의 배열을 인자로 받는 화살표 함수입니다.
• reduce()의 초기값으로 빈 객체 {}를 지정합니다.
• 콜백 함수에서 val(첫 번째 배열의 요소)을 키로 사용하고, 같은 인덱스의 second[ind] 값을 할당합니다.
• 반복이 끝나면 키-값 쌍으로 구성된 완성된 객체가 반환됩니다.

실행 결과

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

{
    firstName: 'Hitesh',
    lastName: 'Kumar',
    isEmployed: false,
    occupation: 'Frontend Developer',
    address: 'Tilak Nagar, New Delhi',
    salary: 90000,
    expenditure: 45000
}

참고: Object.fromEntries()를 사용한 대안

ES2019부터는 Object.fromEntries()와 map()을 조합해 더욱 간결하게 작성할 수도 있습니다.

const combineArrays = (first, second) =>
    Object.fromEntries(first.map((key, ind) => [key, second[ind]]));

두 방법 모두 결과는 동일하지만, reduce() 방식은 로직을 단계별로 명확히 보여주는 장점이 있고, Object.fromEntries() 방식은 코드가 더 짧고 선언적이라는 장점이 있습니다. 상황과 팀의 코드 스타일에 맞게 선택하시면 됩니다.