[ES6] Destructuring / Object literal shorthand

ES6에서 추가된 또 다른 기능은 "Destructuring"이다. 

const point = [10, 25, -34];

const x = point[0];

const y = point[1];

const z = point[2];

console.log(x, y, z);

const gemstone = {

type: 'quartz',

color: 'rose',

carat: 21.29

};

const type = gemstone.type;

const color = gemstone.color;

const carat = gemstone.carat;

console.log(type, color, carat);

배열과 객체(object)에서 요소들을 다른 변수에 저장하려면, 위와 같이 각각의 요소들을 하나씩 참조하는 방식을 써야 했다. ES6에서는 destructuring을 통해 완전히 같은 결과를 더 간편하게 얻을 수 있는데, perl과 python에서 가져온 개념이라고 한다. 다음과 같이 사용한다.

const point = [10, 25, -34];

const [x, y, z] = point;

console.log(x, y, z);

const gemstone = {

type: 'quartz',

color: 'rose',

carat: 21.29

};

const {type, color, carat} = gemstone;

console.log(type, color, carat);

주의할 점은, 배열의 경우 순서를 지켜야 한다. 만약

let positions = ['Gabrielle', 'Jarrod', 'Kate', 'Fernando', 'Mike', 'Walter'];
let [first, second, third] = positions;

위와 같은 코드는 position라는 배열에서 1, 2, 3번째 요소를 각각 first, second, third라는 변수에 저장한다. 변수 이름이 first, second, third라서가 아니라, 빈 칸 없이 연달아 1, 2, 3번째를 채웠기 때문이다. 만약 1, 4, 6번째 요소를 가져오고 싶다면, 

let [first, , , second, , third] = positions;

과 같이 하면 positions 배열에서 1, 4, 6번째 요소를 가져온다. 

[ ]가 의미하는 것은 배열을 destructuring 한다는 뜻이며, [ ] 안에 들어가는 것은 "요소를 가져와 저장하는 변수의 이름" 일 뿐이다.

반면, 객체를 destructuring할 경우 property의 이름을 그대로 맞춰줘야만 해당 값을 가져올 수 있다.

※ 참조: Destructuring assignment (MDN)

---

Object literal shorthand

다음과 같이 object를 만든다고 하자.

let type = 'quartz';
let color = 'rose';
let carat = 21.29;

const gemstone = {
  type: type,
  color: color,
  carat: carat
};

console.log(gemstone);

먼저 만들어진 변수들의 이름과 'gemstone' object의 property들의 이름이 같다. 이렇게 변수 이름과 property 이름이 같은 object를 만들 때, ES6에서는 코드를 간결하게 만드는 방법이 있다.

let type = 'quartz';
let color = 'rose';
let carat = 21.29;

const gemstone = { type, color, carat };

console.log(gemstone);

그냥 변수 이름만 써주면, 그대로 object가 생성된다!

만약 object에 메소드를 추가한다면, 원래는 다음과 같이 쓸 것이다.

let type = 'quartz';
let color = 'rose';
let carat = 21.29;

const gemstone = {
  type,
  color,
  carat,
  calculateWorth: function() {
    // will calculate worth of gemstone based on type, color, and carat
  }
};

ES6에서는 간단히 이렇게 해도 된다.

let gemstone = {
  type,
  color,
  carat,
  calculateWorth() { 
    ... 
  }
};

익명 함수를 만들기 위해 function()를 따로 쓸 필요가 없다.