구조분해 할당

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

배열 구조 분해

// 배열 구조 분해

// 기본값
const [x, y, z = 5] = [1, 2];
console.log(x, y, z); // 1 2 5 , z에 기본값 지정

const users = ["ari", "nunu", "mike"];
const [user1, user2, user3] = users;
console.log(user1, user2, user3); // ari nunu mike

const str = "mike-tom-jane";
const [user4, user5, user6] = str.split("-");
console.log(user4, user5, user6); //mike tom jane

// 일부 반환값 무시
const [user7, , user8] = ["ari", "nunu", "mike", "tom"];
console.log(user7, user8); // ari mike, 두번째 요소는 할당받을 변수가 없으니 생략, 네번째 요소도 무시됨

// 바꿔치기
let a = 3;
let b = 5

[a, b] = [b, a];

객체 구조 분해

// 객체 구조 분해
const user = { name: "tim", age: 30 };
const { age, name } = user; // 순서를 신경쓰지 않아도 된다.
console.log(age); // 30


// 새로운 변수 이름으로 할당
const user = { name: "tim", age: 30 };
const { age: userAge, name: userName } = user; 
console.log(userAge); // 30
console.log(userName); // tim


// 기본값
const user = { name: "tim", age: 30 };
const { age, name, gender = "male" } = user;
console.log(gender); // male, 만약 user 객체에 gender가 있다면 객체 gender가 출력된다. 
// 객체로 받은 값이 undefined일 때만 기본값이 사용된다는 점을 주의하자.