JavaScript에서 두 개의 배열을 하나의 객체로 키-값 쌍으로 저장하는 방법

JavaScript 개발을 하다 보면 길이가 같은 두 개의 배열을 하나의 객체로 합쳐야 하는 경우가 자주 있습니다. 예를 들어 다음과 같이 키 역할을 할 배열과 값 역할을 할 배열이 있다고 가정해 보겠습니다.

const arr1 = ['firstName', 'lastName', 'age', 'address', 'isEmployed'];
const arr2 = ['Rahul', 'Sharma', 23, 'Tilak Nagar', false];

여기서 우리가 작성해야 할 함수는 이 두 배열을 받아서, 첫 번째 배열의 요소를 키(key)로, 두 번째 배열의 대응되는 요소를 값(value)으로 매핑하는 객체를 생성하는 것입니다.

이런 작업에는 Array.prototype.reduce() 메서드가 가장 적합합니다. reduce()는 누적값(accumulator)을 활용해 배열을 순회하며 결과를 만들어 내기 때문에, 키-값 쌍으로 구성된 객체를 손쉽게 빌드할 수 있습니다.

예제 코드

구현 코드는 다음과 같습니다.

const arr1 = ['firstName', 'lastName', 'age', 'address', 'isEmployed'];
const arr2 = ['Rahul', 'Sharma', 23, 'Tilak Nagar', false];

const mapArrays = (arr1 = [], arr2 = []) => {
    const res = arr1.reduce((acc, elem, index) => {
        acc[elem] = arr2[index];
        return acc;
    }, {});
    return res;
};

console.log(mapArrays(arr1, arr2));

실행 결과

콘솔에는 아래와 같은 객체가 출력됩니다.

{
    firstName: 'Rahul',
    lastName: 'Sharma',
    age: 23,
    address: 'Tilak Nagar',
    isEmployed: false
}

동작 원리

reduce() 콜백 함수의 세 번째 매개변수인 index를 활용하면, 현재 처리 중인 arr1의 요소와 같은 위치에 있는 arr2의 값을 그대로 가져올 수 있습니다. 초기값으로 빈 객체 {}를 전달한 뒤, 각 반복마다 acc[elem] = arr2[index]를 실행하며 키-값 쌍을 하나씩 추가하는 방식입니다.

더 간결한 대안: Object.fromEntries()

ES2019 이상의 환경이라면 Object.fromEntries()와 map()을 조합해 한 줄로 처리할 수도 있습니다.

const mapArrays = (arr1, arr2) => Object.fromEntries(
    arr1.map((key, i) => [key, arr2[i]])
);

두 방법 모두 결과는 동일하지만, reduce() 방식은 호환성이 넓고 로직 흐름이 명확해서 널리 사용됩니다. 상황에 맞게 선택하시면 됩니다.