[ES6] 구조 분해 할당(Destructuring Assignment)

📝 요약

• 구조 분해 할당(비구조화) → "객체나 배열을 분해한다."

• 변수 선언 + 객체나 배열의 요소 할당
  [c, ,d] = [1, 2, 3];
const { h, i: {j}, k } = obj2;

• 값이 없는 자리에 변수를 선언할 경우 undefined가 들어간다.

---

@배열

예시1) 배열의 첫 번째 요소와 마지막 요소를 변수에 담아 출력

// ES6 이전
var array = [1, 2, 3];
var a = array[0];
var b = array[array.length - 1];

console.log(a);  // 1
console.log(b);  // 3

// ES6 적용
[c, ,d] = [1, 2, 3];

console.log(c);  // 1
console.log(d);  // 3

• ES6를 적용한 코드를 살펴보면 변수 c와 d를 선언함과 동시에 각각 배열의 첫 번째 요소와 세 번째 요소를 담는 것이라는 것을 직관적으로 알 수 있다.
• 가운데의 빈 칸은 두 번째 요소를 가리키지만 변수에는 대입하지 않겠다는 것이다.

---

@객체

// ES6 이전
var obj = {
  e: 'E',
  f: {
    g: 'G'
  }
};

var e = obj.e;  // 'E'
var g = obj.f.g;  // 'G'

// ES6 적용
const obj2 = {
  h: 'H',
  i: {
    j: 'J'
  }
};
const { h, i: {j}, k } = obj2;
console.log(h, j, k);  // 'H', 'J', undefined

• 위의 변수 k처럼 obj2에 없는 변수를 선언했을 경우, 자동으로 undefined가 들어간다.