JavaScript에서 null 또는 빈 객체({})로 이루어진 배열에 값을 할당하려면, 원본 객체의 키 목록을 활용해 각 빈 객체에 순서대로 속성을 추가하면 됩니다. 여기서 핵심 역할을 하는 것은 바로 Object.keys() 메서드입니다.
핵심 개념: Object.keys()
Object.keys(obj)는 객체가 가진 모든 키(속성 이름)를 배열 형태로 반환합니다. 아래 예제의 obj 객체에는 firstName, lastName, address라는 세 개의 키가 있으므로, 이 키들을 인덱스처럼 활용하면 빈 객체 배열의 각 요소에 하나씩 속성을 할당할 수 있습니다.
예제 코드
다음은 JavaScript를 사용하여 빈 객체가 있는 배열에 값을 할당하는 전체 코드입니다.
<!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 {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>빈 객체 배열에 값 할당하기</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>위 버튼을 클릭하면 arrObj 내부의 빈 객체에 값이 할당됩니다</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
let obj = {
firstName: "Rohan",
lastName: "Sharma",
address: "Delhi",
};
let arrObj = [{}, {}, {}];
BtnEle.addEventListener("click", () => {
arrObj.forEach((item, index) => {
item[Object.keys(obj)[index]] = obj[Object.keys(obj)[index]];
});
console.log(arrObj);
});
</script>
</body>
</html>코드 동작 방식
버튼을 클릭하면 forEach 루프가 arrObj 배열의 각 빈 객체를 순회합니다. 이때 Object.keys(obj)[index]로 원본 객체의 키를 하나씩 가져오고, 동일한 인덱스에 해당하는 값을 그 키에 할당합니다. 그 결과 첫 번째 빈 객체에는 firstName, 두 번째에는 lastName, 세 번째에는 address가 각각 저장되며, 최종 결과는 console.log(arrObj)를 통해 콘솔에 출력됩니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭한 뒤 콘솔에서 출력을 확인하면 다음과 같습니다.
