Javascript. 구조 분해 할당(Destructuring assignment)

Destructuring assignment

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

배열 구조 분해

let user = ['a', 'b', 'c'];
let [user1, user2, user3] = user;

console.log(user1); // 'a'
console.log(user2); // 'b'
console.log(user3); // 'c'

let [el1, el2, el3] = [1,2];
console.log(el3); // undefined -> 그래서 기본값 설정하여 에러 방지
let [el1 = 3 , el2 = 4, el3 = 5] = [1,2];

// 공백과 쉼표를 이용해 일부 반환값 무시
let [el1, , el2] = [1, 2, 3, 4, 5];
console.log(el1); // 1
console.log(el2); // 3

// 이미 할당된 변수를 서로 바꾸려면 의미없는 변수를 하나 더 만들어야 했음
let a = 1;
let b = 2;
let c = a;
a = b;
b = c;

// 변수 바꿔치기를 구조 분해 할당을 활용하여 간단하게 가능
[a, b] = [b, a];

객체 구조 분해

let user = {name: 'a', age: 30};
let {name, age} = user;
// 위 코드는 아래 코드와 동일
// let name = user.name;
// let age = user.age;

// 배열 구조 분해와 달리 순서 상관없이 동작
let {age, name} = user;

// 꼭 프로퍼티 네임으로 쓸 필요는 없고 아래와 같이 변수명을 바꿔줄 수 있음
let {name : userName, age: userAge} = user;

// 기본값 줄 수 있음
let {name, age = 0} = user;