36장 디스트럭처링 할당

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

36.1 배열 디스트럭처링 할당

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

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

// 배열 디스트럭처링 할당을 위해서는 할당 연산자 왼쪽에 할당받을 변수를 선언해야 한다.
// 이때 변수를 배열 리터럴 형태로 선언한다.
const [x, y] = [1, 2]

// 이때 우변에 이터러블을 할당하지 않으면 에러가 발생한다.
const [x, y] // SyntaxError: ~~~
const [a, b] = {} // TypeError: ~~~

// 배열 디스트럭처링 할당의 변수 선언문은 선언과 할당을 분리할 수도 있다.
// 단, 이 경우 const 키워드로 변수를 선언할 수 없다.
let x, y
[x, y] = [1, 2]

// 배열 디스트럭처링 할당의 기준은 배열의 인덱스로, 순서대로 할당된다.
// 변수의 개수와 이터러블 요소의 개수가 반드시 일치할 필요는 없다.
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 = 5] = [1, 2]
console.log(a, b, c) // 1 2 5

// 기본값보다 할당된 값이 우선한다.
const [a, b, c = 5] = [1, 2, 3]
console.log(a, b, c) // 1 2 3

// 필요한 요소만 추출하여 변수에 할당하고 싶을 때 유용하다.
// ex) p.638-639 URL을 파싱해 protocol, host, path 객체 생성

// Rest 요소 ...을 사용할 수 있다.
// Rest 요소는 Rest 파라미터와 마찬가지로 반드시 마지막에 위치해야 한다.
const [x, ...y] = [1, 2, 3]
console.log(x, y) // 1 [2, 3]

36.2 객체 디스트럭처링 할당

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

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

// 객체 디스트럭처링 할당을 위해 할당 연산자 왼쪽에 변수를 선언해야 한다.
const { lastName, firstName } = { firstName: 'MJ', lastName: 'Kim' }

// 이때 우변에 객체 또는 객체로 평가될 수 있는 표현식을 할당하지 않으면 에러가 발생한다.
const { lastName, firstName } // SyntaxError : ~~~
const { lastName, firstName } = null // TypeError : ~~~

// 객체 프로퍼티 키와 변수 이름이 같으면 프로퍼티 축약 표현이 가능하다.
// 객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당받으려면 다음과 같이 변수를 선언한다.
const user = { firstName: 'MJ', lastName: 'Kim' }
const { firstName: 이름, lastName: 성 } = user
console.log(이름, 성) // MJ Kim

// 객체 디스트럭처링 할당을 위한 변수에 기본값을 설정할 수 있다.
const { firstName = "HM", lastName } = { lastName: "Son"}
console.log(firstName, lastName) // HM Son

const user = { firstName: 이름 = 'HM', lastName: 성 } = { lastNmae: "Son" }
console.log(이름, 성) // HM Son

// 객체 디스트럭처링 할당은 객체에서 프로퍼티 키로 필요 프로퍼티 값만 추출해 변수에 할당하고 싶을 때 유용하다.
const str = "Hello"
const {length} = str
console.log(length) // 5

const todo = { id: 1, content: "HTML", completed: "true" }
const { id } = todo
console.log(id) // 1

// 객체 디스트럭처링 할당은 객체를 인수로 전달받는 함수의 매개변수에도 사용할 수 있다.
// 리액트에서 하위 컴포넌트에 props로 값을 내릴 때 자주 사용하던 그것이 바로 이것이다.
function printTodo(todo) {
    console.log(`할일 ${todo.content}은 ${todo.completed ? "완료" : "비완료"} 상태입니다`)
}

function printTodo({ content, completed }) {
    console.log(`할일 ${content}은 ${completed ? "완료" : "비완로"} 상태입니다`)
}

// 배열의 요소가 객체인 경우 배열 디스트럭처링 할당과 객체 디스트럭처링 할당을 혼용할 수 있다.
const todos = [
    { id: 1, content: "HTML", completed: true },
    { id: 2, content: "CSS", completed: false },
    { id: 3, content: "JS", completed: true }
]

const [, { id, content }] = todos
console.log(id, content) // 2 CSS

// 중첩 객체는 다음과 같이 사용한다.
const user = {
    name: 'Han',
    address: {
        zipCode: '03067',
            city: 'Seoul'
    }
}

const { address: { city } } = user
console.log(city) // 'Seoul'

// 객체 디스트럭처링 할당을 위한 변수에 Rest 프로퍼티 ... 을 사용할 수 있다.
const { x, ...rest } = { x: 1, y: 2, z: 3 }
console.log(x, rest) // 1 { y: 2, z: 3 }