[딥다이브] - 36. 디스트럭처링 할당

36.1. 배열 디스터럭처링 할당

ES6의 배열 디스트럭처링 할당은 배열의 각 요소를 배열에서 추출해 변수에 할당한다.
배열 디스트럭처링 할당의 우변은 이터러블이어야 하고, 인덱스를 기준으로 순서대로 할당된다.
좌변에 값을 할당받을 변수를 배열 리터럴 형태로 선언한다. 변수의 개수와 이터러블의 요소 개수가 일치할 필요는 없다.

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

이터러블에서 필요한 요소만 추출하여 변수에 할당하고 싶을 때 유용하다.

아래는 URL을 파싱하여 protocol, host, path 프로퍼티를 갖는 객체를 생성해 리턴하는 예제다.

function parseURL(url = '') {
  const parsedURL = url.match(/^(\w+):\/\/([^/]+)\/(.*)$/)

  if (!parsedURL) return {}

  const [, protocol, host, path] = parsedURL
  return { protocol, host, path }
}

console.log(parseURL('https://developer.mozilla.org/ko/docs/Web/JavaScript'))
/*
{
  protocol: 'https',
  host: 'developer.mozilla.org',
  path: 'ko/docs/Web/JavaScript'
}
*/

36.2. 객체 디스트럭처링 할당

ES6의 객체 디스트럭처링 할당은 객체의 각 프로퍼티를 추출해 변수에 할당한다.
객체 디스트럭처링 할당의 우변은 객체여야 하며, 프로퍼티 키를 기준으로 할당된다.
순서는 의미가 의미가 없으며 선언된 변수 이름과 프로퍼티 키가 일치해야 할당된다.

const str = 'Hello'
// String 래퍼 객체로부터 length 프로퍼티만 추출
const { length } = str
console.log(length) // 5

// Rest 프로퍼티
const { x, ...rest } = { x: 1, y: 2, z: 3 }
console.log(x, rest) // 1 { y: 2, z: 3}