ES6알아보기 11 - Destructuring

ES6알아보기 11 - Destructuring

2018, Jul 24    

오늘은 매우 유용한 표현식인 비구조화 표현식에 대해 알아보도록 하겠습니다.

기본적인 내용들은 MDN의 도큐멘트를 참고했습니다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment


비구조화(destructuring) 란?

배열이나 객체타입의 속성을 해체해서 재구조화 할 수 있는 표현식입니다.

기본적인 표현은 아래와 같습니다.

// 배열의 재구조화
var [a, b] = [10, 20]
console.log(a) // 10
console.log(b) // 20

// 객체의 재구조화
var { c, d } = { c: 30, d: 40 }
console.log(c) // 10
console.log(d) // 20


변수 값 교환하기

처음 이걸 보고 Javascript의 위대함? 을 실감했습니다. ㅋ
보통 저레벨 언어나 다른 많은 언어들에서는 아래와 같이 변수 값을 교환합니다.

var a = 10
var b = 20
var temp

temp = a
a = b
b = temp

console.log(a) // 20
console.log(b) // 10

ES6 에서는 destructuring 구문을 통해 매우 간단하게 구현이 가능합니다.

var a = 10;
var b = 20;

[b, a] = [a, b]

console.log(a) // 20
console.log(b) // 10

이런 단순함과 타 언어들에 비해 쉽게 구현이 가능한 점이 자바스크립트의 장점이 아닐까 생각합니다.


객체를 새로운 변수명으로 재구조화하기

배열의 경우 var [a, b] = [10, 20] 과 같이 직관적으로 변수명 a 와 b 를 지정할 수 있지만 객체의 경우는 조금 다릅니다.

객체에서의 변수명 지정

var {a: name, b: job} = { a: 'James', b: 'student' }

console.log(name) // James
console.log(job) // student

변수명 지정과 동시에 초기값을 설정할 수도 있습니다.

var { a: name, b: job = 'unemployed' } = { a: 'James'}

console.log(name) // James
console.log(job) // unemployed


rest 구문으로 나머지 할당하기

이전 살펴보았던 rest parameter 를 destructuring 에서도 응용해서 재구조화 할 수 있습니다.

// 배열에서의 나머지
var [a, b, ...rest] = [10, 20, 30, 40, 50]

console.log(a) // 10
console.log(b) // 20
console.log(rest) // [30, 40, 50]

// 객체에서의 나머지
var {b, ...rest} = {a: 10, b: 20, c: 30, d: 40, e: 50}

console.log(a) // 10
console.log(b) // 20
console.log(rest) // {a: 10, c: 30, d: 40, e: 50}
  • 주의점
  1. 배열과 객체 상관없이 나머지 구문 ...변수명 은 반드시 마지막에 위치해야합니다.
  2. 객체의 경우에는 오른쪽 객체에서 사용하지 않은 나머지 요소들을 전부 반환합니다. 위의 경우에는 b 요소 이외의 나머지 {a: 10, c: 30, d: 40, e: 50} 를 전부 반환하였습니다.
Twitter Facebook Google+
# javascript