두 개의 배열을 하나의 JavaScript 객체로 변환하는 방법

두 개의 배열을 하나의 JavaScript 객체로 변환하기

JavaScript를 사용하다 보면 하나의 배열에는 키(key)가 담겨 있고, 다른 배열에는 값(value)이 담겨 있는 경우가 종종 있습니다. 예를 들어 아래와 같은 두 개의 배열이 있다고 가정해 보겠습니다.

키 배열: ["firstName", "lastName", "age"]
값 배열: ["Rohan", "Sharma", 21]

이 두 배열을 조합하면 다음과 같은 객체를 만들 수 있습니다.

{ firstName: "Rohan", lastName: "Sharma", age: 21 }

가장 간단한 방법은 forEach() 메서드를 활용하여 키 배열을 순회하면서, 같은 인덱스에 위치한 값을 새로운 객체에 할당하는 것입니다. 아래는 전체 동작 과정을 확인할 수 있는 완전한 예제 코드입니다.

예제 코드

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result,.sample {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
    .result {
        color: red;
    }
</style>
</head>
<body>
<h1>두 개의 배열을 하나의 JavaScript 객체로 변환하기</h1>
<div class="sample">
["firstName", "lastName", "age"]<br />["Rohan", "Sharma", 21]
</div>
<div class="result"><br /></div>
<button class="Btn">CLICK HERE</button>
<h3>위 버튼을 클릭하면 두 배열로부터 객체가 생성됩니다</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    var objKeys = ["firstName", "lastName", "age"];
    var objValues = ["Rohan", "Sharma", 21];
    var resultObj = {};
    BtnEle.addEventListener("click", () => {
        objKeys.forEach(
            (element, index) => (resultObj[element] = objValues[index])
        );
        for (let i in resultObj) {
            resEle.innerHTML += "Key = " + i + " : Value = " + resultObj[i] + "<br>";
        }
    });
</script>
</body>
</html>

코드 설명

핵심 로직은 다음 한 줄입니다.

objKeys.forEach((element, index) => (resultObj[element] = objValues[index]));

forEach()가 키 배열을 순회할 때 현재 요소(키)와 인덱스를 함께 전달받고, 해당 인덱스를 이용해 값 배열에서 대응되는 값을 꺼내 객체에 할당합니다. 이후 for...in 반복문으로 생성된 객체의 모든 키와 값을 화면에 출력합니다.

출력 결과

위 코드를 실행하면 다음과 같은 결과를 얻을 수 있습니다.

두 개의 배열을 하나의 JavaScript 객체로 변환하는 방법

'CLICK HERE' 버튼을 클릭하면 객체의 키와 값이 아래와 같이 표시됩니다.

두 개의 배열을 하나의 JavaScript 객체로 변환하는 방법

참고: 다른 변환 방법

ES2019 이상 환경이라면 Object.fromEntries()와 map()을 조합해 더욱 간결하게 처리할 수도 있습니다.

const resultObj = Object.fromEntries(objKeys.map((key, i) => [key, objValues[i]]));

또한 두 배열의 길이가 항상 일치한다는 보장이 없다면, 변환 전에 길이를 검사하거나 Math.min()으로 범위를 제한하는 것이 안전합니다.