JS [클린코드] | 구조분해할당(Destructuring)

구조분해할당이란 배열이나 객체의 값을 분해하여 다른 변수에 할당하는 것을 말한다.

변수에 할당

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

다른 이름을 갖는 변수에 할당

const {a:aaa,b:bbb,c:ccc}={a:10,b:20,c:30}
console.log(aaa); // 10
console.log(bbb); // 20
console.log(ccc); // 30

함수의 파라미터에 활용

const players=[
    {id:0,name:"k",age:10},
    {id:1,name:"a",age:20},
    {id:2,name:"n",age:30},
    {id:3,name:"h",age:40}
]

players.map(({id,name,age})=>{
    console.log(id); // 0, 1, 2, 3
    console.log(name); // k, a, n, h
    console.log(age); // 10, 20, 30, 40
})

깊은 복사

let arr = [10,20,30];
let copy1=arr;
let copy2=[...arr]
let [...copy3]=arr;

arr[0]="flower"
console.log(arr); // [ 'flower', 20, 30]
console.log(copy1); // [ 'flower', 20, 30]
console.log(copy2); // [ 10, 20, 30]
console.log(copy3); // [ 10, 20, 30] 

Reference
자바스크립트 {...} [...] 문법 (비구조화 할당/구조분해 할당)