이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

게시글

강좌7 - ECMAScript - 2년 전 등록 / 8달 전 수정

ES2015(ES6) 비구조화(destructuring)

조회수:
0
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

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

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

투표로 게시글에 관해 피드백을 해주시면 많은 도움이 됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright © 2016- 무단 전재 및 재배포 금지

댓글

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


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