객체 리터럴

객체 리터럴

JavaScript 객체 리터럴은 객체를 생성하는 간단하고 직관적인 방법이다. 객체 리터럴을 사용하면 중괄호 {}를 사용하여 객체를 생성하고, 객체의 속성(key)과 값(value)을 콜론 ' : '을 통해 정의할 수 있다. 이 방법은 코드가 간결해지고 가독성이 좋아지는 장점이 있습니다.

 

객체 리터럴에 의한 객체 생성

let person = {
  // 프로퍼티 키 : 프로퍼티 값
  name: "Alice",
  age: 25,
  city: "Wonderland",
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

console.log(person);  // {name: 'Alice', age: 25, city: 'Wonderland', greet: ƒ}

 

프로퍼티 키는 식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야 한다.

let person = {
  firstName: 'Ung-mo',  // 식별자 네이밍 규칙을 준수하는 프로퍼티 키
  'last-name': 'Lee'    // 식별자 네이밍 규칙을 준수하지 않는 프로퍼티 키
}

console.log(person);  // {firstName: 'Ung-mo', last-name: 'Lee'}

 

동적 생성

let obj = {};
let key = 'hello';

// 프로퍼티 키 동적 생성
obj[key] = 'world';
obj['name'] = 'jim';
obj.city = 'seoul';

console.log(obj);  // {hello: 'world', name: 'jim', city: 'seoul'}

 

프로퍼티 접근

마침표 표기법

let person = {
  name: "Alice",
  age: 25,
  city: "Wonderland"
};

console.log(person.name); // "Alice"
console.log(person.age);  // 25
console.log(person.city); // "Wonderland"

 

대괄호 표기법

대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 한다.

let person = {
  name: "Alice",
  age: 25,
  city: "Wonderland"
};

console.log(person["name"]); // "Alice"
console.log(person["age"]);  // 25
console.log(person["city"]); // "Wonderland"

 

프로퍼티 값 갱신

let person = {
  name: 'Lee'
};

// person 객체에 name 프로퍼티가 존재하므로 name 프로퍼티의 값이 갱신
person.name = 'Kim';

console.log(person);  // {name: 'Kim'}

person["name"] = 'Moon';

console.log(person);  // {name: 'Moon'};

 

프로퍼티 삭제

let person = {
  name: "Alice",
  age: 25,
  city: "Wonderland"
};

// delete 연산자로 city 프로퍼티를 삭제할 수 있다.
delete person.city;

console.log(person);  // {name: 'Alice', age: 25}

 

ES6에서 추가된 객체 리터럴의 확장 기능

let name = "Alice";
let age = 30;

let person = {
  name, // 속성 이름이 변수명과 동일하여 생략 가능
  age,  // 속성 이름이 변수명과 동일하여 생략 가능
  greet() { // 메서드 축약 function 키워드 생략
    console.log("Hello!");
  }
};

console.log(person.name); // "Alice"
person.greet(); // "Hello!"