ECMAScript (ES6) 구조 분해 할당 destructing

구조분해할당이란 비구조화라고 생각하시면 되는데, 객체나 배열을 분해하는 것입니다!

 

 

기존 코드 

• 배열 해체 

var array = [1, 2, 3];
var a = array[0];
var b = array[array.length - 1];
console.log(a); // 1
console.log(b); // 3

구조 분해 할당을 사용하지 않은 경우에는 배열의 위치를 각각 다 선언해준 뒤 호출하고 있습니다. 

 

• 객체 해체 

var obj = {
  e: 'Eeee',
  f: {
    g: 'Gee'
  }
};
var e = obj.e; // 'Eeee'
var g = obj.f.g; // 'Gee'

객체의 값들을 또 다시 변수로 선언해주고 있습니다. 

 

 

 

구조 분해 할당 코드 

• 배열 해체 

const [c, ,d] = [1, 2, 3];
console.log(c); // 1
console.log(d); // 3

[c, ,d]라는 문법으로 c는 배열의 첫 번째 요소를 가리키고, d는 세 번째 요소를 가리키는 것으로 선언하였습니다!

두 번째 요소는 공백으로 변수를 지정해주지 않겠다는 것입니다. 

 

• 객체 해체 

const obj2 = {
  h: 'Eich',
  i: {
    j: 'Jay'
  }
}
const { h, i: { j }, k } = obj2;
console.log(h, j, k); // 'Eich', 'Jay', undefined

객체도 { } 을 사용하여 h값은 그냥 불러오고 j에 값은 obj안에 있는 i의 객체에서 불러오므로 {j} 형태로 해체하여 불러옵니다. 

k는 가져왔지만 obj2에 선언되어 있지 않으므로 undefined가 들어가게 됩니다. 

 

 

• 객체 값을 받는 매개변수도 해체가 가능 

const destruct = ({ value: x }) => {
 console.log(x);
};
const arg = { value: 3 };
destruct(arg); // 3

 

 

 

아직 구조 분해 할당에 대해서 기초적인 것들만 다루었으니 

더 구체적인 내용들은 나중에 들고오겠습니다!. 

 

다음 게시글은 for ~ of 문으로 찾아오겠습니다^^