JavaScirpt_10_2객체 리터럴

Yoon Tschoe·2022년 1월 14일
0

JavaScript

목록 보기
8/10

JavaScirpt 공부 정리
<모던 자바스크립트 Deep Dive>의 목차를 따릅니다. 책을 발제하는 것을 기본 골조로 하고, 개인이 공부한 내용을 추가합니다.


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

  • cf) 클래스 기반 객체지향 언어: 클래스를 사전에 정의하고 필요한 시점에 new 연산자와 함께 생성자constructor을 호출하여 인스턴스를 생성하는 방식으로 객체를 생성한다.
  • 객체 리터럴을 통한 객체 생성은 자바스크리븥의 유연함과 강력함을 대표하는 객체 생성 방식으로,
  • 객체를 생성하기 위해 클래스를 사전에 정의하고 필요한 시점에 new 연산자와 함께 생성자constructor을 호출할 필요가 없다.
  • 객체 리터럴에 프로퍼티를 포함시켜 객체를 생성함과 동시에 프로퍼티를 만들 수도 있고, 객체를 생성한 이후 프로퍼티를 동적으로 추가할 수도 있다.

2. 생성 이후

 var person = {
  name: 'Choi';
};

person.name = 'Lim';  // 프로퍼티 값 갱신
person.age = 32; // 프로퍼티 동적 생성
delete person.age; // 프로퍼티 삭제

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

1) 프로퍼티 축약 표현

  • 프로퍼티 값으로 변수를 사용하는 경우, 변수 이름과 프로퍼티 키가 동일한 이름일 때
var x = 1, y = 2;

// ES5
var obj = {
  x: x,
  y: y
};

// ES6
const obj = {x, y};

2) 계산된 프로퍼티 이름

  • 객체 리터럴 내부에서도 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생산할 수 있다.
const prefix = 'prop';
let i = 0;

// ES5 (물론 위에도 키워드도 var로 고쳐야함)
var obj = {}; 
// 이후 동적 생성

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

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

3) 메서드 축약 표현

sayHi: function() {...}
sayHi() {...}
profile
프론트엔드 개발자를 목표로 하는 전 미술기획자

0개의 댓글