정의 및 사용 방법

객체 리터럴(Object literal)이란 객체 값을 생성하는 표기법입니다.

중괄호({}) 안에 0개 이상의 속성 이름(property name)과 값(value)을 콜론(:)으로 연결한 쌍을, 쉼표(,)로 구분한 목록으로 표기합니다.

여기서 리터럴(literal)이란 사람이 읽고 이해할 수 있는 형태로, 값 자체를 코드에 직접 표기하여 생성하는 것을 말합니다. 다시 말해, 리터럴은 변수나 계산 결과가 아니라 코드 안에서 값 그 자체를 표기하는 방식입니다.

객체 리터럴도 같은 개념이며, 그 자체로 데이터 타입이 객체인 값을 표기하는 것입니다.

기본 예제

다음은 person이라는 변수에 객체 리터럴로 객체 값을 생성하는 예제입니다.

JavaScript 
// 객체 리터럴 예제
const person = {
    name: "홍길동",
    age: 25,
    isStudent: false,
    greet: function() {
        console.log(`안녕하세요, 저는 ${this.name}입니다.`);
    }
}

// person 변수의 데이터 타입 확인
console.log(typeof person); // "object"

// person 객체의 속성(property) 접근
console.log(person.name); // "홍길동"
console.log(person.age);  // 25
person.greet();           // "안녕하세요, 저는 홍길동입니다."

객체 리터럴과 자바스크립트의 객체

객체 리터럴로 생성하는 객체는 어떤 객체인지 살펴보겠습니다.

자바스크립트에서는 다양한 형태의 객체가 있습니다.
형태나 목적만 다를 뿐이지 배열, null, 정규식 표현 등도 모두 데이터 타입이 객체입니다.

다음 예제는 typeof 연산자를 사용해 자바스크립트에 다양한 형태의 객체가 존재한다는 것을 보여줍니다.

다양한 형태의 객체 
typeof [1, 2, 3];  // "object" — 배열도 객체
typeof null;       // "object" — null도 객체
typeof /regex/;    // "object" — 정규식도 객체

이처럼 자바스크립트에는 다양한 목적을 가진 객체들이 있으며, 각 객체는 용도에 맞춰 서로 다른 문법으로 생성됩니다.

그렇다면 객체 리터럴로 생성하는 객체는 무엇일까요?

결론부터 말하자면, 객체 리터럴로 생성한 객체는 자바스크립트의 가장 기본적인 형태의 객체(Plain objects, 일반 객체)입니다.
흔히 자바스크립트에서 “객체”라고 부르는 것은 바로 이 형태를 가리킵니다.

객체 리터럴은 중괄호({}) 안에 0개 이상의 속성 이름(property name)과 값(value)을 콜론(:)으로 연결한 쌍을, 쉼표(,)로 구분한 목록으로 작성합니다.

그럼 이제는 객체 리터럴을 작성하는 표기법에 대해 살펴보겠습니다.

표기법

객체 리터럴을 작성하는 방법을 좀 더 자세히 알아보겠습니다.

객체 리터럴은 중괄호({}) 안에 0개 이상의 속성의 이름(property name)과 값(value)을 콜론(:)으로 연결한 쌍을, 쉼표(,)로 구분하여 나열하는 형태입니다.

기본 구조

JavaScript 
const 객체명 = {
    속성이름1: 값1,
    속성이름2: 값2,
    // ...
}; // ← 변수 선언 끝나는 부분에는 세미콜론(;)이 올 수 있지만, 중괄호 자체에는 세미콜론을 붙이지 않아도 됩니다.
  • 중괄호({}): 객체를 감싸는 기호입니다.
  • 속성이름 : 값: 속성의 이름과 그 값을 콜론(:)으로 연결합니다. 보통 이것을 쌍으로 연결되어 있다고 말합니다. 콜론(:) 앞 뒤의 띄어쓰기는 코드를 읽기 쉽게하기 위한 것으로 띄어쓰기의 유무는 상관이 없습니다.
  • 쉼표(,): 각 속성 쌍을 구분합니다. 마지막 속성 쌍 뒤에 다음에 오는 속성 쌍이 없이 쉼표(,)를 붙이더라도 상관없습니다. 이렇게 작성해도 오류가 발생하지 않습니다.

속성이름 : 값

객체 리터럴로 생성되는 객체는 0개 이상의 속성(property)과 값(value)으로 구성됩니다.
속성이름 : 값으로 표기하며, 속성이름은 객체 안에서 각 값을 구분하는 고유한 이름 역할을 하며, 이 이름을 사용해 코드에서 해당 속성에 접근하거나 조작할 수 있습니다.

예를 들어, 다음 객체에는 name과 age라는 두 개의 속성이 있습니다.

JavaScript 
const person = {
    name: "홍길동",
    age: 25
}

여기서 name과 age가 속성 이름이며,
"홍길동"과 25가 각각 해당 속성의 값입니다.

속성(property) 이름의 작성 규칙

자바스크립트에서 변수명은 정해진 규칙을 따라야 합니다.

  • 영어, 숫자, $ 또는 _로 구성됩니다.
  • 숫자로 시작할 수 없습니다.

반면, 객체의 속성 이름은 변수명보다 훨씬 자유롭습니다.

  • 띄어쓰기나 하이픈(-)처럼 변수명으로 쓸 수 없는 문자가 포함된 경우, 따옴표로 감싸주면 됩니다.
  • 심지어 숫자만으로 된 속성 이름도 가능합니다.
변수명 규칙을 따르는 경우

변수명과 마찬가지로 속성 이름은 띄어쓰기 없이 작성하고, 영어, 숫자, $ 또는 _로 구성해야 합니다. 숫자로 시작할 수는 없습니다.

JavaScript 
const person = {
    name: "홍길동",
    age: 25,
    isStudent: false,
    $score: 95
}
따옴표를 사용하는 경우

속성 이름에 띄어쓰기나 변수명 규칙에 어긋나는 특수문자가 포함된 경우, 반드시 따옴표('' 또는 "")로 감싸주어야 합니다. 이렇게 하면 훨씬 더 자유로운 이름으로 속성을 만들 수 있습니다.

JavaScript 
const user = {
    'full name': "홍길동", // 작은따옴표
    "birth-date": "2004-01-25" // 큰따옴표
}

탬플릿 리터럴(백틱 `)를 그냥 사용할 수는 없지만, 속성 이름에 대괄호([])를 감싸서 사용할 수 있습니다.

JavaScript 
const userA = {
    [`job title`]: "프론트엔드 개발자" // []로 감싸서 템플릿 리터럴 사용 가능
}

const field = "name";
const userB = {
    [`full ${field}`]: "홍길동"  // 동적인 속성 이름 생성
}
숫자 속성 이름

숫자만으로 속성 이름을 작성할 수 있습니다. 이때, 자바스크립트는 이 숫자를 자동으로 문자열로 변환하여 처리합니다. 즉, 따옴표를 사용하는 경우와 동일해집니다.

JavaScript 
const user = {
    2004: "2004년생"
}

// 다음과 동일하게 처리됩니다.
const user = {
    "2004": "2004년생"
}
속성 축약 표현(Property Shorthand)

ES6부터 객체 리터럴을 작성할 때, 변수명과 속성 이름이 같으면 다음과 같이 축약해서 쓸 수 있습니다.

JavaScript 
const a = 1;
const b = 2;

const obj = { a, b }

console.log(obj);  // { a: 1, b: 2 }

속성의 값(value)

객체의 속성 값은 변수에 할당할 수 있는 모든 종류의 값을 사용할 수 있습니다. 즉, 객체의 속성은 자바스크립트에서 표현 가능한 모든 값을 가질 수 있습니다.

메서드 작성법

속성 값으로 함수, 즉 메서드(method)를 정의할 수 있습니다.
메서드는 객체 내부에서 동작하는 함수이며, 객체의 상태를 다루거나 기능을 수행할 때 사용됩니다.

자바스크립트에서는 메서드를 작성하는 여러 가지 방식이 있습니다.

익명 함수 표현식

가장 기본적인 형태로, 속성 값에 익명 함수(anonymous function)를 할당하는 방법입니다.

JavaScript 
const obj = {
    // 익명 함수 표현식
    greet: function() {
        console.log("안녕하세요");
    },

    // 화살표 함수 표현식
    greetArrow: () => {
        console.log("안녕하세요");
    }
}

obj.greet();      // "안녕하세요"
obj.greetArrow(); // "안녕하세요"
메서드 축약 표현법 (ES6+)

ES6부터는 함수 키워드를 생략하고 메서드 이름과 괄호만으로 작성할 수 있습니다.

JavaScript 
const obj = {
    greet() {
        console.log("안녕하세요");
    }
}

obj.greet(); // "안녕하세요"
매개변수가 있는 메서드

메서드는 필요한 매개변수를 받을 수 있습니다.

JavaScript 
// 익명 함수 표현식
const obj1 = {
    add: function(a, b) {
        return a + b;
    }
}

console.log(obj1.add(3, 4)); // 7

// 축약형 메서드 표현법
const obj2 = {
    add(a, b) {
        return a + b;
    }
}

console.log(obj2.add(3, 4)); // 7

빈 객체 생성하기

객체 리터럴에서 중괄호({})만 사용하면 빈 객체를 생성할 수 있습니다.

빈 객체는 속성이 하나도 없는 상태로, 나중에 속성을 추가하거나 기능을 구현할 때 기본으로 많이 사용됩니다.

JavaScript 
const emptyObj = {}
console.log(typeof emptyObj); // "object"
console.log(Object.keys(emptyObj)); // [] — 속성 없음

빈 객체는 자바스크립트에서 가장 기본적인 객체 형태로, 함수의 기본 매개변수, 옵션 객체, 또는 초기 상태로 자주 활용됩니다.

빈 문자열을 속성 이름으로 사용

객체 리터럴에서 속성 이름에 빈 문자열("")을 사용하는 것은 문법적으로 전혀 문제가 없습니다. 즉, 에러 없이 정상적으로 객체가 생성되고 속성에 접근할 수 있습니다.

JavaScript 
const obj = {
    "": "빈 문자열 속성 이름의 값"
}

console.log(obj[""]); // "빈 문자열 속성 이름의 값"

객체 접근

객체 리터럴로 생성한 객체의 접근 방법에 대해 알아보겠습니다.

객체 자체에 접근하기

객체 리터럴로 생성한 객체는 보통 변수에 할당하여, 이후에 참조하거나 조작할 수 있습니다.

JavaScript 
const person = {
    name: "홍길동",
    age: 25
}

// person 변수를 통해 객체 전체에 접근할 수 있습니다.
console.log(person); // { name: "홍길동", age: 25 }

속성(property) 접근하기

객체가 가진 각 속성(property)에 접근하는 방법은 크게 두 가지가 있습니다.

  • 점 표기법(dot notation)
  • 대괄호 표기법(bracket notation)

속성 이름의 형태와 상황에 따라 적절한 방식을 선택해 사용합니다. 이제 각 접근법의 특징과 사용법을 자세히 살펴보겠습니다.

점 표기법(dot notation)

점 표기법은 가장 기본적이고 자주 사용하는 객체 속성 접근 방법입니다.
속성 이름이 유효한 식별자(알파벳, 숫자, $, _로 구성되고 숫자로 시작하지 않는 이름)일 때 사용합니다.

올바른 예제
JavaScript 
const person = {
    name: "홍길동",
    age: 25
}

console.log(person.name); // "홍길동"
console.log(person.age);  // 25

점 표기법은 간결하고 읽기 쉽지만, 속성 이름이 식별자 규칙을 벗어나면 사용할 수 없습니다.

잘못된 예제

속성 이름에 공백, 특수문자, 숫자로 시작하는 이름 등이 포함되면 점 표기법을 사용할 수 없습니다.

JavaScript 
const obj = {
    "first name": "홍길동",
    "1stPlace": true
}

console.log(obj.first name); // 문법 오류
console.log(obj.1stPlace);   // 문법 오류

이 경우 대괄호 표기법을 사용해야 합니다.

대괄호 표기법(bracket notation)

대괄호 표기법은 객체 속성 이름이 유효한 식별자가 아니거나, 동적으로 속성 이름을 지정해야 할 때 주로 사용하는 접근 방법입니다.

하지만 대괄호 표기법은 점 표기법으로도 접근할 수 있는 속성에 대해서도 사용할 수 있어, 더 범용적이고 유연한 방법입니다. 예를 들어, 점 표기법이 가능한 속성도 대괄호 표기법으로 접근할 수 있습니다.

일반적으로 점 표기법으로는 접근할 수 없는 속성 이름에 유용하며, 속성 이름을 문자열이나 변수로 표현할 수 있다는 장점이 있습니다.

예제
JavaScript 
const obj = {
    "first name": "Alice",
    "1stPlace": true,
    "": "빈 문자열 속성 이름",
}

console.log(obj["first name"]);  // "Alice"
console.log(obj["1stPlace"]);    // true
console.log(obj[""]);            // "빈 문자열 속성 이름"

// 변수에 저장된 속성 이름으로 접근하기
const propName = "first name";
console.log(obj[propName]);      // "Alice"
대괄호 표기법에서 속성 이름 작성 방법

대괄호 표기법을 사용할 때는 속성 이름을 문자열로 작성해야 합니다. 또는 문자열을 담은 변수로도 사용할 수 있습니다.

반면, 점 표기법에서는 속성 이름을 변수처럼 식별자로 직접 작성합니다.

JavaScript 
const obj = {
    name: "홍길동"
}

// 점 표기법
console.log(obj.name);    // "홍길동"

// 대괄호 표기법
console.log(obj["name"]); // "홍길동"

속성 추가와 속성 값 업데이트

객체는 생성 후에도 언제든지 새로운 속성을 추가하거나, 기존 속성의 값을 변경(업데이트)할 수 있습니다.

속성 추가

변수에 저장된 객체에 점 표기법 또는 대괄호 표기법을 사용해 새로운 속성을 추가할 수 있습니다.

JavaScript 
const person = {
    name: "홍길동"
}

// 점 표기법을 이용한 속성 추가
person.age = 30;

// 대괄호 표기법을 이용한 속성 추가
person["job"] = "개발자";

console.log(person);
/* 출력 결과
{
    name: "홍길동",
    age: 30,
    job: "개발자"
}
*/

속성 값 업데이트

기존 속성도 동일한 방법으로 값을 변경(업데이트)할 수 있습니다.

JavaScript 
person.age = 31;
person["job"] = "프론트엔드 개발자";

console.log(person.age);  // 31
console.log(person.job);  // "프론트엔드 개발자"

속성 삭제

자바스크립트 객체에서 특정 속성을 삭제하려면 delete 연산자를 사용합니다.
삭제된 속성은 객체에서 완전히 사라지며, 이후 해당 속성에 접근하면 undefined가 반환됩니다.

JavaScript 
const person = {
    name: "홍길동",
    age: 31,
    job: "프론트엔드 개발자"
}

delete person.job;  // job 속성 삭제

console.log(person.job);  // undefined
console.log(person);      
/* 출력 결과
{
    name: "홍길동",
    age: 31
}
*/

속성 순회

객체 리터럴로 생성한 객체의 속성을 순회하는 대표적인 방법은 for...in 문을 사용하는 것입니다.

예제

JavaScript 
const person = {
    name: "홍길동",
    age: 31,
    job: "개발자"
}

for (const key in person) {
    console.log(`${key}: ${person[key]}`);
}
/* 출력:
    name: 홍길동
    age: 31
    job: 개발자
*/

주의 사항

  • for...in 문은 객체 자신의 속성뿐 아니라 프로토타입 체인에 있는 상속된 속성도 순회합니다.
  • 객체 자신의 속성만 순회하려면 hasOwnProperty 메서드를 사용해 필터링해야 합니다.
JavaScript 
for (const key in person) {
    if (person.hasOwnProperty(key)) {
        console.log(`${key}: ${person[key]}`);
    }
}

명세서

객체 리터럴의 명세서 사양
명세서 사양
Object Initializer ECMAScript® 2026 Language Specification
#sec-object-initializer

브라우저 호환성

객체 리터럴의 브라우저 호환성
Syntax
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
Object Initializer 예 예 예 예

같이 보기