[JavaScript] 구조 분해 할당 구문

오늘은 구조 분해 할당 구문에 대해서 공부했다. 

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

// 변수 값 서로 교환하기
let a = 1;
let b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

const arr = ['one', 'two', 'three', 'four']
const [first, second] = arr // 각 변수에 array 배열의 원소 값 대입
console.log(first, second) // one two

// 전개 문법을 배열 분해에 적용 가능
const arr = ['one', 'two', 'three', 'four']
const [start, ...rest] = arr
console.log(start) // one
console.log(rest) // ["two", "three", "four"]

// 객체 분해
const myUser = { name: 'Leo', age: 25 }
const { name } = myUser // myUser안의 name의 속성 값을 변수 name에 대입 -> 변수와 속성값 분리 가능
console.log(name) // Leo

// 전개 문법 사용
const myUser = { name: 'Leo', age: 25 }
const { name, ...args } = myUser

console.log(name) // Leo
console.log(args) // { age: 25 }

// 새로운 변수 이름으로 할당
const {a: newA = 2, b: newB = 7} = {a: 0}; // 객체로부터 해체된 값이 undefined인 경우, 기본값 할당 가능

console.log(newA); // 0
console.log(newB); // 7 -> 기본값으로 지정한 7 출력

 

아직 좀 헷갈리는 개념이다.. 차분히 더 복습해야겠다!