[DeepDiveJS] 10장 객체 리터럴

자바스크립트는 객체 기반 프로그래밍 언어이다.

🔫 객체는 프로퍼티 와 메서드로 구성된 집합체이다. 상태와 동작을 하나의 단위로 구조화 할 수 있다.

• 프로퍼티 : 객체의 상태를 나타내는 값(data)
• 메서드 : 프로퍼티를 참조하고 조작할 수 있는 동작

프로퍼티

객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다.

let person = {
  // 프로퍼티 키는 name, 프로퍼티 값은 "sarah"
  name: "sarah",
  // 프로퍼티 키는 age, 프로퍼티 값은 20
  age: 20,
};

메서드

객체에 묶여 있는 함수

let circle = {
  radius: 5, // 프로퍼티
  
  // 원의 지름
  getDiameter: function () { // 메서드
    return 2 * this.radius;
  },
};

프로퍼티 접근

프로퍼티에 접근하는 방법은 두 가지가 있다.

• 마침표 프로퍼티 접근 연산자(.)를 사용하는 마침표 표기법
  ex) person.name
• 대괄호 프로퍼티 접근 연산자([...])를 사용하는 대괄호 표기법.
  ex) person['name']

대괄호 프로퍼티 접근 연산자의 경우 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 한다. 그렇지 않으면 자바스크립트 엔진이 식별자로 해석한다.

person[name] -> undefined 출력. 선언된 name이 없기 때문

프로퍼티 삭제

delete 연산자로 객체의 프로퍼티를 삭제한다.

let person = {
  name: "sarah",
};

delete person.name;

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

📌 프로퍼티 축약 표현
ES6에서는 프로퍼티 값으로 변수를 사용하는 경우 변수 이름과 프로퍼티 키가 동일한 이름일 때 프로퍼티 키를 생략 할 수 있다.

let x = 1,
  y = 2;

const obj = { x, y };

console.log(obj); // {x : 1, y : 2}

📌 메서드 축약 표현

const obj = {
  name: "sarah",
  sayHi() {
    console.log("Hi! " + this.name);
  },
};

obj.sayHi(); // Hi! sarah