모던 자바스크립트 Deep Dive 10장-객체 리터럴

객체란?

• 0개 이상의 프로퍼티(객체의 상태를 나타내는 값)로 구성된 집합
• 프로퍼티 값이 함수인 걸 메서드라고 함

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

객체 리터럴 : { }

프로퍼티

• 프로퍼티 키 : 모든 문자열(공백가능), 심벌 값
  문자열이나 심벌 값 외에 값을 사용하면 암묵적 타입변환으로 문자열로 변환됨
  식별자 네이밍 규칙을 따르지 않는 키값은 반드시 따옴표 사용
  식별자 네이밍 규칙을 따르는 이름은 따옴표 생략 가능
  프로퍼티 키 동적 할당 가능
  중복 선언 시에는 나중에 선언한게 덮어쓰고 에러 X

  const object = {};
  object['name'] = 'dog';
  

• 프로퍼티 값 : JS에 있는 모든 값

메서드

프로퍼티 값이 함수일 경우 메서드라고 함
객체에 묶여 있는 함수 = 메서드
메서드 내부에서의 this는 객체 자기 자신을 가르킴

프로퍼티 접근

• 마침표 표기법
• 대괄호 표기법 ( ' '로 감싼 문자열, 안감싸면 식별자로 인식)

const object = { name : 'hona'};
object.name; 
object['name'];

• 객체에 존재하지 않는 프로퍼티에 접근 시 undefined 반환

프로퍼티 값 갱신

이미 존재하는 프로퍼티에 값을 할당하면 갱신됨

프로퍼티 동적 생성

존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티 생성 후 값이 할당됨

const person = {name : 'aj'};
person.age = 27;
person['aka'] = 'gonzo';

프로퍼티 삭제

존재 하지 않는 프로퍼티 삭제해도 에러 없이 무시

const person = {
	name : 'aj',
    age : 27,
    sex : 'male'
};

delete person.name;
delete person['age'];

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

• 프로퍼티 값으로 변수를 사용하고 키를 생략하면 키는 변수이름으로 자동 생성

  let x = 1, y = 2;
  const object = {x,y};
  object    // {x : 1 , y : 2}

• 메서드 축약 표현

  const cat = { 
     name : '야옹이',
     hi() {
         console.log(`hi i'm ${this.name}`);
         },
  };

  이웅모, 『모던 자바스크립트 Deep Dive』, 위키북스(2021)