JavaScript에서 for...in 루프를 사용하면 빈 객체에 기존 객체의 속성을 동적으로 복사하거나 새로운 속성을 추가할 수 있습니다. 이 방법은 객체의 키(key)를 하나씩 순회하면서 값을 할당하는 가장 기본적이면서도 효율적인 방식으로, 객체 복사나 데이터 변환 작업에서 자주 활용됩니다.
예제
다음은 JavaScript에서 for 루프를 사용하여 빈 객체에 속성을 설정하는 전체 코드입니다.
<!DOCTYPE html>
<html lang="en">
<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>Setting property in an empty object using for loop</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to populate the empty object obj1</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
let obj = {
firstName: "Rohan",
lastName: "Sharma",
age: 14,
class: 8,
};
let obj1 = {};
BtnEle.addEventListener("click", () => {
for (let i in obj) {
obj1[i] = obj[i];
}
for (let i in obj1) {
resEle.innerHTML += "key = " + i + " : Value = " + obj1[i] + "<br>";
}
});
</script>
</body>
</html>코드 설명
위 예제의 핵심 로직은 다음과 같이 동작합니다.
1. 원본 객체 정의: obj 객체에는 firstName, lastName, age, class 총 4개의 속성이 미리 정의되어 있습니다.
2. 빈 객체 생성: obj1 = {}처럼 중괄호만 사용해 아무 속성도 없는 빈 객체를 만듭니다.
3. for...in 루프로 속성 복사: 첫 번째 루프에서 obj의 모든 키를 순회하며 obj1[i] = obj[i] 형태로 대괄호 표기법(bracket notation)을 사용해 속성과 값을 그대로 복사합니다.
4. 결과 출력: 두 번째 for...in 루프가 obj1의 키와 값을 하나씩 읽어 화면에 표시합니다.
출력
위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭하면 빈 객체 obj1에 복사된 속성들이 아래와 같이 화면에 출력됩니다.
정리
for...in 루프와 대괄호 표기법을 조합하면 별도의 라이브러리 없이도 객체의 속성을 자유롭게 동적으로 설정할 수 있습니다. 다만 프로토타입 체인의 속성까지 순회할 수 있으므로, 필요하다면 hasOwnProperty() 메서드를 함께 사용해 자체 속성만 필터링하는 것이 좋습니다.