ZeroCho Blog

안녕하세요. 이번 시간에는 구조 분해 할당에 대해 알아보겠습니다. 비구조화라고 불리기도 합니다. 정말 편리한 기능입니다. 쉽게 말해, 객체나 배열을 분해한다고 생각하시면 됩니다.

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

자바스크립트 친구들이 array배열의 첫 번째 요소와 마지막 요소를 변수 a, b에 담으려고 열심히 노력하고 있네요! 당연한 코드같아 보이는데 ES2015에서는...

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

엥? [c, ,d]라는 황당한 문법으로 변수 c와 d를 동시에 선언했네요. 잘 보시면 어느 정도 합리적인 문법이라는 걸 알 수 있습니다. [c, ,d]에서 c는 배열의 첫 번째 요소이고, d는 세 번째 요소네요. 가운데 콤마는 두 번째 요소를 가리키지만 변수에는 대입하지 않겠다는 것입니다. 배열이 해체되는 모습을 보신겁니다. 일반 객체도 이런 해체가 가능합니다.

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

역시나 자바스크립트 친구들이 힘들게 객체의 값들을 변수로 만들고 있습니다. ES2015는 이를 불쌍히 여겨...

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

h 변수 값을 자동으로 obj2에서 찾아 넣어주고, j 값도 obj2 안의 i 객체에서 찾아 넣어줍니다. 한 줄의 코드로 객체를 해체해버리는 거죠.

위의 k처럼 obj2에 없는 변수를 선언했을 경우, 자동으로 undefined가 들어가기 때문에 에러가 발생하지 않습니다.

객체 값을 받는 매개변수도 해체할 수 있습니다.

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

value 속성의 값을 자동으로 변수 x로 할당해 따로 선언할 필요 없이 x를 사용할 수 있습니다. 정말 편리하죠? 특히 함수를 다룰 때는 예전에 배웠던 default, rest, spread와 함께 사용하면 더 좋습니다! 코드가 확 줄어드는 걸 느낄 수 있을겁니다.

여기서 해체 퀴즈를 내보겠습니다! 다음 두 코드를 해체해보세요. let이나 var의 경우에만 가능한 해체법입니다.

let test, array = [], props, obj = {};
test = array[0];
props = obj.props;

정답은 다음과 같습니다. 조금 해괴하지만 유효한 문법입니다. 그런데 가독성이 조금 떨어지기 때문에 사용을 그리 권장하지는 않습니다. 객체를 해체할 때에 괄호로 감싸주는 것에 주의하세요.

[test] = array;
({ props } = obj)

다음 시간에는 for ... of문에 대해서 알아보겠습니다!