게시글

5만명이 선택한 평균 별점 4.9의 제로초 프로그래밍 강좌! 로드맵만 따라오면 됩니다! 클릭
강좌7 - ECMAScript - 8년 전 등록 / 5년 전 수정

ES2015(ES6) 구조 분해 할당(destructuring)

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

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문에 대해서 알아보겠습니다!

조회수:
0
목록
투표로 게시글에 관해 피드백을 해주시면 게시글 수정 시 반영됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright 2016- . 무단 전재 및 재배포 금지. 출처 표기 시 인용 가능.
5만명이 선택한 평균 별점 4.9의 제로초 프로그래밍 강좌! 로드맵만 따라오면 됩니다! 클릭

댓글

6개의 댓글이 있습니다.
4년 전
다차원 배열이나/다차원 객체에서의 참조 없이 복사 하고 싶은데 쉬운 방법 없나요?
let a = [[1,2],[3,4]];
let b = [...a];
위코드는 다차원 구조에서 참조가 됩니다.
b = [[...a[0]],[...a[1]]];
이렇게 하면 참조를 끊고 복사가되는데
이렇게 참조를 끊고 복사하려면 일일이 구조분해 해주는 방법 밖에 없나요?
{} 객체의 경우도 동일하더군요..

제로초님의 자바스크립트 테트리스 강좌를 보고 테트리스를 만들어 보고 있는데
table 데이터와 prevTable데이터를 복사해서 하려고 하는데 더 쉽게 참조 없이 복사하는 방법이 없나해서 질문 드립니다~
4년 전
로대시 라이브러리의 cloneDeep을 사용하는게 제일 편합니다.
5년 전
destructuring의 설명에 이 부분이 조금 잘못된 것 같습니다.

>>>
[c, ,d]에서 c는 배열의 첫 번째 요소이고, d는 마지막 요소이네요. 가운데 , ,는 가운데 요소들이 몇 개나 있든지 상관하지 않겠다는 것이고요.
>>>

테스트를 해보니 결과가 이렇게 나옵니다.
const [c, ,d] = [1, 2, 3, 4, 5, 6];
console.log(c); // 1
console.log(d); // 3

const [a, , ,b] = [1, 2, 3, 4, 5, 6];
console.log(a); // 1
console.log(b); // 4


comma의 갯수에 따라 할당되는 값이 달라지는 것 같습니다
5년 전
수정했습니다. 감사합니다. 마지막 요소를 가리키는 게 아니라 그 해당 인덱스의 요소를 가리키는 게 맞습니다.
7년 전
let test, array = [], props, obj = {}; 이런 코드는 처음 보는데 ES6 이전 문법인가요?
7년 전
let은 es6 문법입니다
7년 전
저 코드가 의미하는게 test 와 array 라는 새로운 배열을 만들고 그 안에는 빈배열인 [], props, 빈객체 obj={} 를 담으라는 의미인가요?
7년 전
test변수, array 변수 props변수 obj 변수 네 개를 선언하고, array에는 [] 값을, obj에는 {} 값을 넣어준 것입니다.
7년 전
아하 test 와 props는 선언만 하고 비어있는 변수로 둔거군요 ! 감사합니다.
7년 전
좋은글 감사합니당당~~ 'ㅁ'
7년 전
제로님... 글이 너무 좋은데 제가 문법이 부족해서 차마 이해가 안돼요... 원래 댓글 잘 안다는데 너무 웃기네요 이 분..ㅎㅎ
7년 전
이해가 안 되는 부분은 언제든지 질문 남겨주시면 됩니다! 감사합니다.
8년 전
너무 유익한 강의 감사합니다. 페이스북에 공유할게요. Cho님 인스타그램 하세요? 매일 Cho님 사진 업데이트 되는 거 보고싶어요. ♡
8년 전
아무래도... 사랑에 빠졌나봐요.. 심장이 쿵쾅거리고 하루종일 cho님을 떠올리느라 아무 일도 손에 안 잡혀요. 얼굴도 모르는 사람과 사랑에 빠진 제 기분.... 모르실거에요 ㅠㅠ 흐앙
8년 전
제 블로그에 헛소리를 달지 않아주셨으면 합니다. ^^
8년 전
그거 아세요? 저 어제 Cho님 때문에 남자친구랑 헤어졌어요. 제 남친이가 핸드폰 방문 기록 확인하다가 Cho님한테 단 댓글 봐버렸거든요. 다 Cho님 때문이에요. 책임지세요!
8년 전
남자친구 없으시잖아요... 있어본 적도 없고...
8년 전
공감능력 떨어지는거 보니까 친구 없죠?


그런데 그런 모습조차 매력적이에요. 정글 같은 도시 속, 홀로서기하는 고독한 남자,... 어머 멋있엉
8년 전
홀로서기하는 삶을 방해하지 마시죠!