[ES6] 비구조화 할당(구조 분해 할당)

비구조화 할당이란?

다른 말로 구조 분해 할당이라 하며 배열이나 객체의 속성 혹은 값을 해체하여 그 값을 개별 변수에 각각 담아 사용하는 자바스크립트 표현식을 말합니다.

 

배열의 비구조화 할당

// 기존 배열의 변수 할당
const array = [1,2,3,4,5]
const num1 = array[0]
const num5 = array[4]
console.log (num1, num5) // 1, 5

// 비구조화 할당
const [num1, num5] = [1,2,3,4,5]
console.log(num1,num5) // 1, 2

// 비구조화 할당 시 새로운데이터 추가
const [num1, num5, num6 = 6] = [1,5]
console.log(num1, num5, num6) // 1,5,6

 

배열의 비구조화 할당은 객체와는 상관없이 인덱스값이 존재하기 때문에 순서대로 값이 할당이 됩니다. 그렇다면 내가 원하는 값을 받아오려면 어떻게 해야 할까요? 변수명을 지정하고 싶지 않다면 해당 위치를 비워두고 내가 원하는 위치에 변수명을 작성하시면 됩니다.

const [num1, , , , num5] = [1,2,3,4,5]
console.log(num1, num5) // 1, 5

 

객체의 비구조화 할당

//기존 객체의 변수 할당
const object = {'a' : 10, 'b': 20, 'c':30, 'd':40, 'e': 50}
const a = object.a
const d = object.d
console.log (a, d) // 10, 40

//비구조화 할당
const {a,d} = {'a' : 10, 'b': 20, 'c':30, 'd':40, 'e': 50}
console.log(a,d) // 10, 40

const {one, four} = {'a' : 10, 'b': 20, 'c':30, 'd':40, 'e': 50}
console.log(one, four) // undefined, undefined

// 비구조화 할당 시 새로운 객체 생성
const {a, d, z=100} = {'a' : 10, 'b': 20, 'c':30, 'd':40, 'e': 50}
console.log(a, d, z) // 10, 40, 100

 

객체의 비구조화 할당은 key값을 일치시켜줘야 원하는 값을 출력을 받을 수 있는데요. 만약에 변수명을 바꾸고 싶은 경우에는 아래와 같이 작성할 수 있습니다.

const {a : one, d : four} = {'a' : 10, 'b': 20, 'c':30, 'd':40, 'e': 50}
console.log(one, four) // 10, 40

 

전개 구문(전개 연산자)

전개 구문, 혹은 전개 연산자라 불리는 것은 쉽게 말해서 객체나 배열을 나열해 주는 것을 말하는데요. 비구조화 할당에서 사용할 경우에는 나머지 값을 모아서 나열해 주는 것을 말합니다.

이때 배열에서 사용하면 전개 구문이 시작되는 시점부터 마지막까지 데이터를 모아서 나열해 주고

객체에서 사용하게 되면 앞의 값을 뺀 나머지 데이터들을 모아서 나열해 줍니다.

//배열의 전개 구문
const [num1, num2, ...rest] = [1,2,3,4,5]
console.log(num1) // 1
console.log(num2) // 2
console.log(rest) // [3, 4, 5]
console.log(...rest) // 3 4 5

//객체의 전개 구문
const {a, d, ...rest} = { a: 10, b: 20, c: 30, d: 40, e: 50 }
console.log(a) // 10
console.log(d) // 40
console.log(rest) // { b: 20, c: 30, e: 50 }
console.log(...rest) // TypeError: Found non-callable @@iterator

 

이때 배열에서 전개 연산자를 사용한 데이터에 다시 한번 전개 연산자를 이용하게 되면 배열 안의 값만 따로 가져오는데 객체에서는 TypeError가 난 걸 확인할 수 있습니다. 그 이유로는 전개 연산자를 사용하기 위해서 객체나 배열이 이터러블[1] 한가를 확인하기 때문입니다. 즉, 객체 상태에서 전개연산자를 사용하면 이터러블하지 않다는걸 알 수 있습니다.

 

---

[1] 이터러블 : 자료를 반복할 수 있는 객체를 말하며 for... of를 사용을 통해 확인할 수 있습니다.