9. 구조 분해 할당

Destructuring assignment (구조 분해 할당)

• 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식

1. 배열 구조 분해

let [x, y] = [1, 2];

console.log(x);  // 1
console.log(y);  // 2


let users = ['Mike', 'Tom', 'Jane'];
let [user1, user2, user3] = users;
/* 위는 아래 구문과 같음
let user1 = users[0];
let user2 = users[1];
let user3 = users[2];
*/

console.log(user1);  // Mike
console.log(user2);  // Tom
console.log(user3);  // Jane

• 만약, users4가 있다면?

let users = ['Mike', 'Tom', 'Jane'];

• 배열에 해당하는 값이 없는 경우

let users = ['Mike', 'Tom', 'Jane'];
let [user1, user2, user3, user4] = users;

console.log(user1);  // Mike
console.log(user2);  // Tom
console.log(user3);  // Jane
console.log(user4);  // undefined
// let user4와 같이 변수 선언만 되는듯?!

- 이 때, 기본값을 줘서 error방지 가능

let users = ['Mike', 'Tom', 'Jane'];
let [user1, user2, user3="없음", user4="없음"] = users;

console.log(user1);  // Mike
console.log(user2);  // Tom
console.log(user3);  // Jane
console.log(user4);  // 없음

• split을 이용한 배열 구조 분해

let str = 'a-b-c-d';
let [str1, str2, str3, str4] = str.split('-');

console.log(str.split('-'));
// ["a","b","c","d"]
console.log(str1, str2, str3, str4);
// "a" "b" "c" "d"

필요없는 반환값 무시

• 할당받을 배열을 빈칸으로 남겨두거나 할당할 배열보다 적을 경우 해당 값을 무시함

let users = ['Mike', 'Tom', 'Jane', 'Wendy'];
let [user1, , user2] = users;

console.log(user1);  // "Mike"
console.log(user2);  // "Jane"

이미 할당된 값 변경

• a=1, b=2 라는 값이 있을 때, 이 값을 바꿔치기 하려면 의미 없는 변수인 c라는 변수가 필요했음

let a = 1;
let b = 2;
let c = a;  // a값 임시 저장

a = b;
b = c;

• 배열 구조 분해 이용

let a = 1;
let b = 2;

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

2. 객체 구조 분해

• 배열 구조 분해 할당과 유사하지만, 객체 구조 분해 할당은 순서와 상관이 없음.

let user = { name: 'Mike', age: 30, score: 'A' };
let {name, score} = user;
// let name = user.name;
// let score = user.score;

console.log(name);  // 'Mike'
console.log(score);  // 'A'

• 할당받을 객체의 변수명을 항상 프로퍼티의 key값으로 사용해야 하는것은 아님.
• 새로운 변수명으로 할당받아올 수 있음.
• 새로운 변수명으로 할당받았다면, 기존 객체의 키값은 할당받은 변수명으로 사용할 수 없음.

let user = { name: 'Mike', age: 30, score: 'A' };
let {name: userNm, age: userAge} = user;

console.log(userNm);  // 'Mike'
console.log(userAge);  // 30
console.log(name);  // error
console.log(age);  // error

• 기본값 설정

let user = { name: 'Mike', age: 30, score: 'A' };
let {name: userNm, age: userAge, gender='male'} = user;

console.log(userNm);  // 'Mike'
console.log(userAge);  // 30
console.log(gender);  // 'male'