JavascriptES6

객체 리터럴 확장, 상속 그리고 디스트럭처링

js, javascript, es6, destructuring

객체 리터럴의 확장

  • 프로퍼티 축약 표현

es5의 객체 리터럴을 살펴보자. 객체 리터럴의 프로퍼티는 프로퍼티 이름과 프로퍼티 값으로 구성되어 있다.

var x = 1, y = 2
var obj = {
  x: x,
  y: y
}

이런 식으로 말이다.

es6의 경우 프로퍼티 이름을 생략할 수 있다. 이 때의 프로퍼티 이름은 변수명으로 자동 생성된다.

let x = 1, y = 2;
const obj = { x, y};
  • 프로퍼티 이름 조합하기

es5의 객체 리터럴 프로퍼티 이름을 문자열과 변수를 조합하여 동적으로 생성하기 위해선 객체 리터럴 외부에서 프로퍼티 이름을 생성하여 객체에 할당했다.

var i = 0;
var propName = 'prop_';
var obj = {};

obj[propName + ++i] = i;
obj[propName + ++i] = i;
obj[propName + ++i] = i;
console.log(obj);

es6에서는 객체 리터럴 내부에서 프로퍼티 이름을 동적으로 생성할 수 있다.

const i = 0;
const propName = 'prop_';

const obj = {
  [propName + ++i] = i;
}

console.log(obj);
  • 메소드 축약 표현

es5에선 메소드를 선언하기 위해 함수 선언식을 사용한다.

var obj = {
  name: 'Jang',
  sayHi: function() {
    console.log('Hi! ' + this.name)
  }
};

obj.sayHi();

es6에서는 function 키워드를 생략하여 축약 표현이 가능하다.

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

obj.sayHi();
  • [[prototype]] 프로퍼티에 의한 상속

es5에서 객체 리터럴을 상속하기 위해선 Obejct.create() 함수를 사요했다. (프로토타입 패턴 상속)

var parent = {
  name: 'Kim',
  sayHello: function() {
    console.log('Hello! ' + this.name)
  }
};

var child = Object.create(parent);
child.name = 'Jang';
parent.sayHello();
child.sayHello();

es6에서는 객체 리터럴 내부에 [[prototype]] 프로퍼티를 직접 설정할 수 있다. 즉 다른 객체를 직접 바인딩하여 상속을 표현할 수 있다.

const parent = {
  name: 'Jang',
  sayHi() {
    console.log('Hi! ' + this.name)
  }
};

const child = {
  __proto__: parent,
  name: 'Jang'
};

parent.sayHi();
child.sayHi();
  • 디스트럭처링

디스트럭처링의 개념은 구조화된 배열 또는 개체를 비구조화하여 개별적인 변수에 할당한다는 것이다. (말로 설명하면 어렵다…) 배열 혹은 객체 리터럴에서 필요한 값을 뽑아내여 변수에 할당하거나 변환할 때 유용하게 사용된다.

  1. 배열 디스트럭처링

es5에서 배열의 각 요소들을 배열로부터 디스트럭처링하여 변수에 할당하기 위해선

var arr = [1,2,3];
var one = arr[0];
var two = arr[1];
var three = arr[2];

console.log(one, two, three);

이런 식으로 해서 귀찮음이 커진다. 하지만 es6에서는

const arr = [1,2,3];

const [one, two, three] = arr;

console.log(one, two, three);

무려 코드가 2줄이나 줄어들었다! 귀찮음이 때로는 이런 엄청난(?) 결과물을 만들어 내기도 한다.

배열 디스트럭처링을 위해서는 할당 연산자 왼쪽에 배열 형태의 변수 리스트가 필요하고 변수 리스트와 배열은 인덱스를 기준으로 할당된다.

Date 객체에서 연, 월, 일을 추출하는 예제를 같이 만들어 보자.

const today = new Date();
const date = today.isISOString().substring(0, 10);
const [year, month, day ] = date.split('-');
console.log([year, month, day]);
  1. 객체 디스트럭처링

es5에서의 객체 디스트럭처링은 프로퍼티 이름을 사용했다.

var obj = { first: 'apple', last: 'pineapple' };
var first = obj.first;
var second = obj.last;
console.log(first, second);

es6에서는 각 프로퍼티를 객체에서 뽑아서 변수 리스트에 할당한다. 기준은 프로퍼티 이름이다.

const obj = { first: 'apple', last: 'pineapple' };
const { first, last } = obj;
console.log(first, last);

객체 디스트럭처링을 위해서는 할당 연산자 왼쪽에 객체 형태의 변수 리스트가 있어야 한다. 객체 디스트럭처링의 장점은 프로퍼티 이름으로 필요한 프로퍼티 값만을 추출할 수 있다는 점이다.

Share