[객체 리터럴] 중괄호 하나로 끝내는 객체 선언

728x90

객체 리터럴(Object Literal) 

자바스크립트에서 객체는 데이터를 구조화하고 관리하는 데 있어 핵심적인 역할을 합니다. 그중에서도 객체를 선언하는 가장 직관적이고 간단한 방법은 바로 객체 리터럴(Object Literal)을 사용하는 것입니다. 객체 리터럴은 {} 중괄호 안에 key-value 쌍을 나열함으로써 객체를 빠르게 만들 수 있는 문법이며, JSON과 매우 유사한 구조를 가지고 있어 학습 곡선이 완만합니다. 이 문법은 단순한 데이터 구조뿐 아니라, 동적으로 속성을 추가하거나 함수(메서드)를 포함시키는 등 다양한 활용이 가능해 초보자부터 숙련된 개발자까지 널리 사용됩니다. 또한 프론트엔드 개발에서는 서버로부터 받은 데이터를 재구성하거나 구성요소의 상태를 표현할 때 자주 등장하기 때문에, 객체 리터럴을 정확히 이해하고 능숙하게 사용하는 것이 중요합니다.

 

---

1.  객체 리터럴이란?

객체 리터럴은 자바스크립트에서 객체를 선언하고 생성하는 가장 간단한 방법입니다. JSON과 매우 유사한 문법을 사용하며, key-value 쌍의 속성으로 구성됩니다.

const user = {
  name: "Alice",
  age: 28,
  isAdmin: true
};

위 코드에서 user는 name, age, isAdmin이라는 세 개의 속성을 가진 객체입니다.

객체 리터럴의 기본 문법

const objectName = {
  key1: value1,
  key2: value2,
  ...
};

• key는 문자열 또는 식별자 형태로 작성
• value는 어떤 타입이든 올 수 있음 (숫자, 문자열, 배열, 함수 등)

 

---

2.  객체 리터럴의 특징

a.  동적 속성 추가 및 수정

객체 리터럴로 생성된 객체는 언제든지 속성을 추가하거나 수정할 수 있습니다.

user.email = "alice@example.com";
user.age = 29;

b.  중첩 객체 가능

객체 속성 값으로 또 다른 객체를 가질 수 있습니다.

const post = {
  title: "블로그 글",
  author: {
    name: "Alice",
    email: "alice@example.com"
  }
};

c.  메서드 정의도 가능

객체 리터럴 내에서 함수도 정의할 수 있습니다.

const user = {
  name: "Bob",
  greet: function() {
    console.log(`Hello, I'm ${this.name}`);
  }
};

user.greet(); // Hello, I'm Bob

d.  축약 문법 지원

변수명을 키로 사용하는 경우 축약 문법을 사용할 수 있습니다.

const name = "Charlie";
const age = 30;

const user = { name, age };
console.log(user); // { name: "Charlie", age: 30 }

 

---

3.  객체 리터럴 vs 생성자 함수

구분	객체 리터럴	생성자 함수
문법 간결성	매우 간단	상대적으로 복잡
인스턴스 여러 개	불편함 (매번 새로 작성해야 함)	가능 (new 키워드로 쉽게 생성 가능)
사용 용도	간단한 데이터 구조, 임시 객체	다수의 유사 객체를 반복 생성할 때

 

---

4.  예제 - API 응답 가공

프론트엔드에서 서버로부터 받은 데이터를 가공할 때 객체 리터럴이 자주 사용됩니다.

function formatUser(rawUser) {
  return {
    id: rawUser.id,
    fullName: `${rawUser.firstName} ${rawUser.lastName}`,
    isActive: rawUser.status === "active"
  };
}

 

---

5.  마무리

• 객체 리터럴은 {} 안에 key-value 쌍을 나열하는 방식으로 객체를 생성하는 문법입니다.
• 동적 속성 추가, 중첩 객체, 함수 정의 등 다양한 표현이 가능합니다.
• 간단한 데이터 구조를 표현할 때 가장 선호되는 방식이며, JSON과도 거의 동일한 구조입니다.
• 생성자 함수나 클래스를 사용하지 않고도 충분히 유용하게 객체를 활용할 수 있는 방법입니다.

 

---

반응형