[ES6] Destructuring 구조 분해 문법

Destructuring (디스트럭처링) ES6문법

 

기본 객체 배열구조

var arr = [1, 2, 3, 4];
var obj = {
  a: 10,
  b: 20,
  c: 30
};

'구조 분해' 변수 선언 형식이 아래와 같이 자유로워지는 것

var { a, b, c } = obj;

ES6에선 정상동작됨

console.log(a); // 10
console.log(b); // 20
console.log(c); // 30

 

구조 분해 문법을 적용하면 훨씬 더 간편하게 꺼내올 수 있다.

var josh = {
  language: 'javascript',
  position: 'front-end',
  area: 'pangyo',
  hobby: 'singing',
  age: '102'
};

var { language, position, area, hobby, age } = josh;
console.log(language); // javascript
console.log(position); // front-end
console.log(area); // pangyo
console.log(hobby); // singing
console.log(age); // 102

코드 라인 숫자를 줄일 수 있고, 이 문법이 익숙해지면 전체적으로 코드가 더 간결해지는 것을 느낄 수있다.

 

 

https://joshua1988.github.io/es6-online-book/destructuring.html#%ED%8A%B9%EC%A0%95-%EA%B0%9D%EC%B2%B4%EC%9D%98-%EA%B0%92%EC%9D%84-%EA%BA%BC%EB%82%B4%EC%98%A4%EB%8A%94-%EB%B0%A9%EB%B2%95

Destructuring | Vue.js + ES6