구조분해

구조분해란?

• spread 문법을 이용해 배열 혹은 객체의 값을 나누고, 이를 다시 개별 변수의 값으로 할당하는 것을 이야기한다.

배열

• 변수키워드 [변수이름] 으로 변수를 선언하고, 배열의 형태로 값을 할당한다.
• 변수의 이름으로 ...변수이름 을 사용하는 경우 rest 문법에 의해 변수에 지정되지 않고 남은 모든 값을 배열의 형태로 가진다.

let [a, b, ...rest] = [1, 2, 3, 4, 5, 6]

console.log(a) // 1
console.log(b) // 2
console.log(rest) // (4)[3, 4, 5, 6], 나머지 값들을 배열로 할당받는다.

객체

• 변수키워드 {변수이름} 으로 변수를 선언하고, 객체의 형태로 값을 할당한다.
• 하지만 배열과 다르게, 해당 변수명과 할당되는 객체 내부의 key 값이 동일 하여야 할당된다.
• 배열과 동일하게 ...변수이름을 이용하여 rest 문법으로 모든 변수에 지정되지 않고 남은 모든 값을 객체의 형태로 저장 할 수 있다..
• 객체가 가진 value 값이 변수의 값으로 지정된다.

let {a, bb, ...rest} = {a : 1, b : 2, c : 3, d : 4}

console.log(a) // 1
console.log(bb) // undefined
console.log(rest) // {b: 2, c: 3, d: 4}, 나머지 값들을 객체로 할당한다.

---

+

• 구조분해로 변수명을 지정하고자 할때는 변수명을 담은 배열 혹은 객체와 할당될 값의 형태가 동일해야한다.

let [a, b, c] = [1, 2, 3] // O
let [a, b, c] = {a : 1, b : 2, c : 3} // X

let {a, b, c} = {a : 1, b : 2, c : 3} // O
let {a, b, c} = [1, 2, 3] // X, 해당하는 key 값이 없으므로 전부 undefined