구조 분해 할당

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

배열 구조 분해

let [x,y] = [1,2]
console.log(x) -> 1
console.log(y) -> 2

let user = ['mike','tom','jane']

let [user1, user2, user3] = users; 
* let user1 = user[0];
  let user2 = user[1];
  let user3 = user[2];

console.log(user1) -> 'mike'
console.log(user2) -> 'tom'
console.log(user3) -> 'jane'

let str = 'mike-tom-jane'
let [user,1 user2, user3] = str.split('-'); -> ['mike','tom','jane']

console.log(user1) -> 'mike' * 같은 결과 반환.
console.log(user2) -> 'tom'
console.log(user3) -> 'jane'

만약 해당하는 값이 없으면? (기본값)

let [a,b,c] = [1,2]; -> c는 undefined 출력

let [a=3, b=4, c=5] = [1,2];
* 기본값을 설정하고 할당된 값이 없으면 기본값을 출력함
console.log(a) -> 1
console.log(b) -> 2
console.log(c) -> 5

일부 반환값 무시

let [user1, ,user2] = ['mike','tom','jane','tony']
* 지정되지 않는 값은 무시하고 출력함.

console.log(user1) -> 'mike'
console.log(user2) -> 'jane'

바꿔치기

let a = 1;
let b = 2;

* a와 b를 바꾸려면 [a, b] = [b, a];

객체 구조 분해

let user = {name: 'mike', age : 30};
let {name, age} = user;

* let name = user.name;
let age = user.age;

let {age name} = user; * 순서를 바꾸어도 괜찮음

console.log(name) -> 'mike'
console.log(age) -> 30

새로운 변수 이름으로 할당

let user = {name: 'mike', age : 30};
let {name: userName, age: userAge} = user;

console.log(userName) -> 'mike'
console.log(userAge) -> 30

기본값

let user = {name: 'mike', age : 30};
let {name, age, gender} = user; -> gender 는 undefined 출력

let {name, age, gender = 'male'} = user

console.log(gender) -> 'male' 출력 * 기본 값 출력

let user = {name: 'mike', age : 30, gender : 'female'};
let {name, age, gender = 'male'} = user

console.log(gender) -> 'female' 출력 * 할당 된 값 출력