36장. 디스트럭처링 할당

Destructuring assignment(구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화,  구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다.

 

ES6의 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당한다. 이때 배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야 하며, 할당 기준은 배열 인덱스이다.(순서대로 할당)

 

 

const arr = [1, 2, 3]

const [one, two, three] = arr
console.log(one, two, three)

 

배열 디스트럭처링 할당의 기준은 배열 인덱스이다. 즉, 순서대로 할당된다. 이때 변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요는 없다.

const [a, b] = [1, 2]
console.log(a, b) // 1 2

const [c, d] = [1]
console.log(c, d) // 1 undefined

const [e, f] = [1, 2, 3]
console.log(e, f) // 1 2

const [g, , h] = [1, 2, 3]
console.log(g, h) // 1 3

 

배열 디스트럭처링 할당을 위한 변수에 기본값을 설정할 수 있다.

 

const [a, b, c = 3] = [1, 2]
console.log(a, b, c) // 1 2 3

// 기본 값보다 할당된 값이 우선한다.
const [e, f = 10, g = 3] = [1, 2]
console.log(e, f, g) // 1 2 3

 

배열 디스트럭처링 할당을 위한 변수에 Rest 파라미터와 유사하게 Rest 요소(Rest element) ... 를 사용할 수 있다. Rest 요소는 Rest 파라미터와 마찬가지로 받드시 마지막에 위치해야 한다.

 

const [x, ...y] = [1, 2, 3]
console.log(x, y) // 1 [2, 3]

 

객체 디스트럭처링 할당

ES6의 객체 디스트럭처링 할당은 객체의 각 프로퍼티를 객체로부터 추출하여 1개 이상의 변수에 할당한다. 이때 객체 디스트럭처링 할당의 대상(할당문의 우변)은 객체이어야 하며, 할당 기준은 프로퍼티 키다. 즉, 순서는 의미가 없으며 선언된 변수 이름과 프로퍼티 키가 일치하면 할당된다.

 

const user = { firstName: "hyunjin", lastName: "Lee" }
const { lastName, firstName } = user

console.log(lastName, firstName)

 

위 예제에서 객체 리터럴 형태로 선언한 변수는 lastName, firstName이다. 이는 프로퍼티 축약 표현을 통해 선언한 것이다.

 

const user = { firstName: "hyunjin", lastName: "Lee" }

const { lastName, firstName } = user
// const { lastName: lastName, firstName: firstName } = user
console.log(lastName, firstName)

const { lastName: ln, firstName: fn } = user
console.log(ln, fn)

 

객체의 프로퍼티 키를 기준으로 디스트럭처링 할당이 이루어지므로 프로퍼티 키가 lastName인 프로퍼티 값을 ln에 할당하고, 프로퍼티 키가 firstName인 프로퍼티 값을 fn에 할당한다.

객체 디스트럭처링 할당을 위한 변수에 기본값을 설정할 수 있다.

const { firstName = "hyunjin", lastName } = { lastName: "Lee" }
console.log(lastName, firstName)

const { firstName: fn = "hyunjin", lastName: ln } = { lastName: "Lee" }
console.log(ln, fn)

 

배열 요소가 객체인 경우 배열 디스트럭처링 할당과 객체 디스트럭처링 할당을 혼용할 수 있다.

 

// 배열 비구조화 할당과 객체 디스트럭처링 할당 혼용
const todos = [
  {
    id: 1,
    content: "HTML",
    completed: false,
  },
  {
    id: 2,
    content: "CSS",
    completed: true,
  },
  {
    id: 3,
    content: "JavaScript",
    completed: false,
  },
]
const [, { id }] = todos
console.log(id)

 

객체 비구조화할당을 위한 변수에 Rest 파라미터나 Rest 요소와 유사하게 Rest 프로퍼티 ...를 사용할 수 있다. Rest  프로퍼티는 Rest 파라미터나 Rest 요소와 마찬가지로 마지막에 위치해야 한다.

 

const { x, ...rest } = { x: 1, y: 2, z: 3 }
console.log(x, rest)