[2주차 스터디]10장-객체 리터럴

객체 리터럴

객체란?

• 자바스크립트는 객체 기반의 프로그래밍 언어 입니다.
• 원시값을 제외한 나머지는 모두 객체 입니다.
• 원시 값은 변경 불가능한 값이지만, 객체는 변경 가능한 값입니다.
• 객체는 프로퍼티(property)로 구성된 집합이며 프로퍼티는 키(key)와 값(value)로 구성된다.
• 프로퍼티의 값이 함수일 경우 메서드(method)라고 부릅니다.

  자바스크립트에서는 객체와 함수는 밀접한 관계
  함수로 객체를 생성하기도 하고 함수 자체가 객체이기도 합니다.

객체의 생성

• 자바스크립트는 프로토타입 기반 객체지향 언어로 다양한 객체 생성방법을 가짐
  • 객체 리터럴
  • Object 생성자 함수
  • 생성자 함수
  • Object.create 메서드
  • 클래스(es6)
• 객체를 중괄호{} 내에 프로퍼티를 직접 정의해서 사용하는 것은 객체 리터럴 표기법
• 객체리터럴 외에는 모두 함수를 이용한 객체 생성 방법

프로퍼티

• 프로퍼티는 키와 값으로 이루어짐
• 키의 경우 식별자 네이밍 규칙을 따르지 않으면 따옴표로 묵어야함

  var person = {
    firstName : 'Homie',
    last-name : 'Kim' // 에러남, -를 연산자로 인식하기 때문
    'last-name' : 'Kim' // 에러 x
  };

  • 대괄호 [] 사용시 프로퍼티 동적으로 생성가능
  • 키는 내부적으로 문자열로 변환
  • 키 중복 선언시 에러 x, 덮어 씌워 짐

프로퍼티 접근

• 마침표 혹은 대괄호로 접근 가능
• 대괄호 표기법으로 접근 시 문자열사용해야함
• 객체에 존재하지 않는 프로퍼티에 접근 시 undefined 반환, 에러는 안남

es6 객체 리터럴의 확장 기능

프로퍼티 축약 표현

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

let x = 1, y = 2;

// 프로퍼티 축약 표현
const obj = { x, y };

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

계산된 프로퍼티 이름

• 문자열 타입으로 평가 될 수 있는 표현식을 통해 프로퍼티 키를 생성하는 것을 계산된 프로퍼티 이름이라고 한다.

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

// 객체 리터럴 내부에서 계산된 프로퍼티 이름으로 프로퍼티 키 동적 생성
const obj = {
  [`${prefix}-${++i}`]: i,
  [`${prefix}-${++i}`]: i,
  [`${prefix}-${++i}`]: i
};

console.log(obj); // {prop-1: 1, prop-2: 2, prop-3: 3}

메서드 축약 표현

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

// ES6
const obj = {
  name: 'Lee',
  // 메서드 축약 표현
  sayHi() {
    console.log('Hi! ' + this.name);
  }
};

obj.sayHi(); // Hi! Lee