자바스크립트(JavaScript) 객체 리터럴이란? 초보자도 이해하는 핵심 개념

자바스크립트 객체 리터럴(Object Literal)의 개념과 사용 방법을 알아봅니다.

프로그래밍에는 이름 때문에 실제보다 훨씬 어려워 보이는 개념들이 있습니다. 하지만 객체 리터럴(Object Literal)은 장보기 목록을 적는 것만큼 단순한 개념입니다.

객체 리터럴이란 무엇인가?

객체(Object)는 자바스크립트에서 다른 값들과 연결 관계를 가질 수 있는 특별한 유형의 값입니다.

객체 리터럴(Object Literal)은 프로그램이나 앱 코드 안에 말 그대로(literally) 직접 작성하는 객체 값을 의미합니다.

객체 리터럴은 보통 쉼표로 구분된 이름-값 쌍(property:value)들의 목록으로 구성되며, 전체를 중괄호 {}로 감싸서 표현합니다.

객체 리터럴 예시

const dog = {
    name: 'Naya',
    sex: 'female',
    age: 2,
    breed: 'Rottweiler mix'
};

'보통'이라고 표현한 데에는 이유가 있습니다. 객체 리터럴은 아무 속성도 없는 빈 객체일 수도 있고, 단 하나의 이름-값 쌍만 가질 수도 있습니다.

// 빈 객체
const dog = {};

// 단일 프로퍼티
const dog = {
    name: 'Naya'
};

위 예제에서 dog는 객체 값(객체 리터럴)이며, 이름-값 쌍(예: name: 'Naya')을 사용해 강아지에 대한 정보(데이터)를 하나로 묶어 담고 있습니다.

즉, 객체 리터럴은 다른 값들에 대한 참조, 즉 이름-값 쌍을 포함하는 자바스크립트의 한 종류의 값(객체 값)이라고 할 수 있습니다.

프로퍼티와 값의 스코프 차이

여기서 꼭 알아야 할 중요한 점이 있습니다. 객체 내부의 프로퍼티(property)는 객체 안에 존재하며 그 스코프도 객체 내부에 한정되지만, 값(value)은 그렇지 않다는 것입니다.

앞선 예제에서 name, sex, age, breed는 dog 객체의 프로퍼티입니다. 이들은 객체 내부에 속해 있으며, 객체 바깥의 일반 변수들과는 다르게 객체의 일부로 관리됩니다.

반면 'Naya'나 'female' 같은 값들은 객체 내부에 살고 있는 것이 아니며(스코프에 묶이지 않음), 객체의 프로퍼티가 해당 값들을 참조하고 있을 뿐입니다.

생성한 객체 프로퍼티에 접근하기

객체 리터럴로 만든 프로퍼티는 점 표기법(dot notation) 또는 대괄호 표기법(bracket notation)으로 읽거나 수정할 수 있습니다.

console.log(dog.name);     // 'Naya' (점 표기법)
console.log(dog['age']);   // 2 (대괄호 표기법)

dog.age = 3;               // 프로퍼티 값 변경

이처럼 객체 리터럴은 자바스크립트에서 가장 직관적이고 널리 사용되는 객체 생성 방식입니다. 설정 옵션, API 응답 데이터, 사용자 정보 등 구조화된 데이터를 표현할 때 폭넓게 활용되므로, 기초 개념만 제대로 잡아두면 이후의 학습이 훨씬 수월해집니다.