JavaScript에서 값이 배열인 객체와 배열을 병합하는 방법

문제 소개

JavaScript 개발 중에는 다음과 같은 배열과 객체를 하나로 결합해야 하는 경우가 종종 있습니다.

const arr = [1, 2, 3, 4, 5];
const obj = {
    group1: ["Ram", "Mohan", "Shyam"],
    group2: ["Jai", "Dinesh"],
};

여기서 원하는 작업은 배열과 객체를 zip(병합)하여, 배열의 값들이 객체 내 각 그룹 이름을 키로 하는 새로운 객체에 순서대로 할당되도록 만드는 것입니다.

즉, 최종적으로 얻고자 하는 결과는 다음과 같은 형태입니다.

const output = {
    group1: {
        "Ram": 1,
        "Mohan": 2,
        "Shyam": 3
    },
    group2: {
        "Jai": 4,
        "Dinesh": 5
    }
};

해결 접근 방식

구현 아이디어는 단순합니다. 배열의 각 요소를 순회(iterate)하면서, 해당 인덱스가 첫 번째 그룹(group1)에 속하는지 아니면 두 번째 그룹(group2)에 속하는지를 판단하고, 그룹별로 새로운 객체를 만든 뒤 키와 값을 차례대로 매핑하면 됩니다.

예제 코드

다음은 전체 구현 코드입니다.

const arr = [1, 2, 3, 4, 5];
const obj = {
    group1: ["Ram", "Mohan", "Shyam"],
    group2: ["Jai", "Dinesh"],
};
const zipObject = (arr, obj) => {
    const res = {};
    for(let i = 0; i < arr.length; i++){
       if(obj['group1'][i]){
         if(!res['group1']){
            res['group1'] = {};
         };
         res['group1'][obj['group1'][i]] = arr[i];
       }else{
         if(!res['group2']){
            res['group2'] = {};
         }
         res['group2'][obj['group2'][i - obj['group1'].length]] =
         arr[i];
       };
   };
    return res;
};
console.log(zipObject(arr, obj));

코드 동작 방식

• zipObject 함수: 배열과 객체를 인자로 받아 병합된 결과 객체를 반환합니다.
• 그룹 판별: 현재 인덱스 i에 대응하는 obj['group1'][i] 값이 존재하면 group1에, 존재하지 않으면 group2에 할당합니다.
• 객체 초기화: 결과 객체(res)에 해당 그룹 키가 아직 없다면 빈 객체({})로 먼저 초기화한 후 값을 추가합니다.
• 인덱스 보정: group2 처리 시에는 앞선 group1의 길이만큼 인덱스를 조정(i - obj['group1'].length)하여 올바른 이름과 값을 매칭합니다.

실행 결과

위 코드를 실행하면 콘솔에 다음과 같은 결과가 출력됩니다.

{
    group1: { Ram: 1, Mohan: 2, Shyam: 3 },
    group2: { Jai: 4, Dinesh: 5 }
}