2주차 TIL을 뒤늦게 써본다..! 수업시간에 내가 놓쳤던 내용인건지 destructing assignment란 단어가 너무 생소해 mdn 도움을 많이 받았다....!

1. Destructing Assignment(구조 분해 할당)란?

구조분해할당(destructing assignment)이란 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 Javascript 표현식이다.

2. 구조 분해 할당 살펴보기

1) 구문

let a = 0
let b = 0

[a, b] = [10, 20]
console.log(a)   // 10
console.log(b)   // 20

나머지값 ...rest로 받기

let a = 0
let b = 0
let rest = 0

[a, b, ...rest] = [10, 20, 30, 40, 50]
console.log(a)   // 10
console.log(b)   // 20
console.log(rest)    //[30, 40, 50]

let a = 0
let b = 0

({a, b} = {a: 10, b: 20})

console.log(a)     //10
console.log(b)     //20

나머지값 ...rest로 받기

let a = 0
let b = 0
let rest = 0

({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40})
console.log(a)   // 10
console.log(b)   // 20
console.log(rest)    //{c: 30, d: 40}

2) 구조 분해 할당

구조 분해 할당은 위에서 살펴본 구문과 달리 할당받을 변수를 왼쪽에, 분해할 대상을 오른쪽에 작성한다.

let x = [1, 2, 3, 4, 5]
let [y, z] = x

console.log(y)   //1
console.log(z)   //2

let A = ["one", "two", "three"]

let [red, yellow, green] = A

console.log(red)  //one
console.log(yellow)   //two
console.log(green)   //three

3) 변수 값 교환

하나의 구조 분해 표현식으로 두 변수 값을 교환할 수도 있다. 단, 임시 변수가 필요하다!

let a = 1
let b = 2

[a, b] = [b, a]

console.log(a)    //2
console.log(b)    //1

4) 일부 반환 값 무시

function f() {
	return [1, 2, 3]
}

var [a, ,b] = f()

console.log(a)   //1
console.log(b)   //3

출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment