JavaScript 객체 이니셜라이저(Object Initializer) 완벽 정리

객체 이니셜라이저(Object Initializer)는 새로 생성된 객체를 손쉽게 초기화할 수 있는 표현식(expression)입니다. 중괄호 {} 안에 쉼표(,)로 구분된 하나 이상의 속성 이름과 값의 쌍을 나열하는 방식으로 객체를 정의합니다.

JavaScript에서는 변수 이름만 나열해도 해당 변수명이 곧 속성 이름이 되고, 변수 값이 속성 값으로 자동 할당되는 단축 속성명(shorthand property) 문법도 지원합니다.

예제 코드

다음은 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: 20px;
        font-weight: 500;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>JavaScript 객체 이니셜라이저</h1>
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>위 버튼을 클릭하면 객체 이니셜라이저로 객체를 생성하고 결과를 표시합니다</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    let name = "Rohan";
    let age = 22;
    let place = "Delhi";
    const person = { name, age, place };
    BtnEle.addEventListener("click", () => {
        resEle.innerHTML = "person.name = " + person.name + "<br>";
        resEle.innerHTML += "person.age = " + person.age + "<br>";
        resEle.innerHTML += "person.place = " + person.place + "<br>";
    });
</script>
</body>
</html>

코드 설명

위 예제의 핵심 부분은 다음 한 줄입니다.

const person = { name, age, place };

여기서 name, age, place는 각각 미리 선언된 변수입니다. 객체 이니셜라이저의 단축 문법 덕분에 { name: name, age: age, place: place }처럼 반복해서 작성하지 않아도, 변수 이름이 그대로 속성 이름이 되고 변수 값이 속성 값으로 지정됩니다.

실행 결과

버튼을 클릭하기 전에는 빈 화면이 표시됩니다.

JavaScript 객체 이니셜라이저(Object Initializer) 완벽 정리

'CLICK HERE' 버튼을 클릭하면 아래와 같이 객체의 각 속성 값이 출력됩니다.

JavaScript 객체 이니셜라이저(Object Initializer) 완벽 정리

정리

객체 이니셜라이저는 중괄호 {}를 사용해 객체를 즉석에서 생성하고 초기화하는 표현식입니다.
속성은 키: 값 형태로 작성하며, 여러 개일 경우 쉼표로 구분합니다.
변수명과 속성명이 같다면 { name }처럼 단축 속성명 문법을 사용할 수 있어 코드가 더 간결해집니다.
ES6부터는 계산된 속성명(computed property names), 메서드 단축 표기 등 더욱 다양한 기능도 함께 제공됩니다.