디스트럭처링 할당

모던 자바스크립트 Deep Dive을 요약한 내용입니다.

• 디스트럭처링 할당은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다.

36.1 배열 디스트럭처링 할당

• ES5에서 구조화된 배열을 디스트럭처링하여 1개 이상의 변수에 할당하는 방법은 다음과 같다

const arr = [1, 2, 3]
const one = arr[0]
const two = arr[1]
const three = arr[2]

console.log(one, two, three) // 1 2 3

• 배열 디스트럭처링 할당의 대상은 이터러블이여야 하며, 할당 기준은 배열의 인덱스다.

const arr = [1, 2, 3]
const [one, two, three] = arr

console.log(one, two, three) // 1 2 3

• 우변에 이터러블을 할당하지 않으면 에러가 발생한다.

const [x, y] // Uncaught SyntaxError: Missing initializer in destructuring declaration
const [a, b] = {} // Uncaught TypeError: {} is not iterable

• 변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요는 없다.

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

• URL을 파싱하여 protocol, host, path 프로퍼티를 갖는 객체를 생성해 반환한다.

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

	if (!parsedURL) {
		return {}
	}

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

const parsedURL = parseURL('https://handle.atlassian.net/jira/software/c/projects/C1/boards/18')
console.log(parsedURL)
// { 
// 	protocol: 'https', 
//	host: 'handle.atlassian.net', 
//	path: 'jira/software/c/projects/C1/boards/18'
// }

• 배열 디스트럭처링 할당을 위한 변수에 Rest 파라미터와 유사하게 Rest 요소fmf tkdydgkf tn dlTek.

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

36.2 객체 디스트럭처링 할당

• ES5에서 객체의 각 프로퍼티를 객체로부터 디스트럭처링하여 변수에 할당하기 위해서는 프로퍼티 키를 사용해야 한다.

const user = {firstName: 'Ungmo', lastName: 'Lee'}
const firstName = user.firstName
const lastName = user.lastName

console.log(firstName, lastName) // Ungmo Lee

• ES6의 객체 디스트럭처링 할당은 객체의 각 프로퍼티를 객체로부터 추출하여 1개 이상의 변수에 할당한다.
  • 할당 기준은 프로퍼티 키

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

• 객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당받으려면 다음과 같이 변수를 선언한다.

const user = {firstName: 'Ungmo', lastName: 'Lee'}
const {lastName: ln, firstName: fn} = user

console.log(fn, ln) // Ungmo Lee

• 객체 디스트럭처링 할당은 객체에서 프로퍼티 키로 필요한 프로퍼티 값만 추출하여 변수에 할당하고 싶을때 유용하다.

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

• 객체 디스트럭처링 할당은 객체를 인수로 전달하는 함수의 매개변수에도 사용할 수 있다.

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

printTodo({id: 1, content: 'HTML', competed: true}) // 할일 HTML은 비완료 상태입니다.

• 매개변수 todo에 객체 디스트럭처링 할당을 사용하면 좀더 간단하고 가독성 좋게 표현할 수 있다.

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

printTodo({id: 1, content: 'HTML', competed: true}) // 할일 HTML은 비완료 상태입니다.

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

const todos = [
	{id: 1, content: 'HTML', completed: true},
	{id: 2, content: 'CSS', completed: false},
	{id: 3, content: 'JS', completed: false}
]

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

• 중첩 객체의 경우

const user = {
	name: 'Lee',
	address: {
		zipCode: '03068',
		city: 'Seoul'
	}
}

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

• 객체 디스트럭처링 할당을 위한 변수에 Rest 파라미터나 Rest 요소와 유사하게 Rest 프로퍼티 …를 사용할 수 있다.

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