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

10.1. 객체란?

• 자바스크립트는 객체(object) 기반 언어
  • 원시 값을 제외한 나머지(함수, 배열, 정규 표현식 등)는 모두 객체
• 원시 타입은 변경 불가능한 값이지만, 객체 타입은 변경 가능한 값
• 객체 타입(object type)은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조
  • 0개 이상의 프로퍼티로 구성된 집합
  • 프로퍼티 값으로 함수 가능, 일반 함수와 구별하기 위해 메서드(method)라고 함
    • 프로퍼티: 객체의 상태를 나타내는 값(data)
    • 메서드: 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작

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

• 자바스크립트는 프로토타입 기반 객체 지향 언어
• 다양한 객체 생성 방법
  • 객체 리터럴: 중괄호({...};) 내 0개 이상의 프로퍼티 정의
    • 객체 리터럴의 중괄호는 값을 평가하는 표현식이므로 세미콜론을 붙여야 함
  • Object 생성자 함수
  • 생성자 함수
  • Object.create 함수
  • 클래스(ES6)

10.3. 프로퍼티

• 객체는 프로퍼티의 집합, 프로퍼티는 키와 값으로 구성됨
  • 프로퍼티 키: 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
    • 식별자 역할
    • 식별자 네이밍 규칙을 준수하는 이름인 경우 따옴표 생략 가능
  • 프로퍼티 값: 자바스크립트에서 사용할 수 있는 모든 값

10.4. 메서드

• 객체에 묶여 있는 함수

10.5. 프로퍼티 접근

• 마침표 표기법: 마침표 프로퍼티 접근 연산자(.) 사용
• 대괄호 표기법: 대괄호 프로퍼티 접근 연산자([...]) 사용
  • 대괄호 안에는 따옴표('')로 감싼 문자열

var person = {
  name: 'Park';
};
console.log(person.name); // 'Park'
console.log(person['name']); // 'Park'

10.6. 프로퍼티 값 갱신

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

10.7. 프로퍼티 동적 생성

• 존재하지 않는 프로퍼티에 값을 할당하면 동적으로 프로퍼티가 생성되어 할당됨

10.8. 프로퍼티 삭제

• delete 연산자로 객체의 프로퍼티 삭제 가능

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

10.9.1. 프로퍼티 축약 표현

• 객체의 프로퍼티 값은 변수에 이미 할당된 값, 식별자 표현식도 가능
• 변수 이름과 프로퍼티 키 이름이 동일할 때 프로퍼티 키 생략 가능

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

10.9.2. 계산된 프로퍼티 이름

• 문자열 표현식을 동적으로 프로퍼티 키 생성 가능
• 대괄호([...]) 표기법을 사용해야 함

const prefix = 'prop';
let i = 0;

obj[prefix + '-' + ++i] = i; // ES5
const obj = {
  [`${prefix}-${++i}`] = i 
}; // ES6

10.9.3. 메서드 축약 표현

• ES6에서는 객체 메서드 정의할 때 function 키워드 생략 가능
  
  

[출처] 모던 자바스크립트, Deep Dive