[JS] 구조 분해 할당

Destructuring assignment 구조 분해 할당

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

배열 구조 분해

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

> user1 = 'Mike'
> user2 = 'Tom'
> user3 = 'Jane'

문자열은 split을 이용해 다음과 같이 분해 가능하다.

let str= "Mike-Tom-Jane";
let [users1, user2, user3] = str.split('-');

> user1 = 'Mike'
> user2 = 'Tom'
> user3 = 'Jane'

---

만약, 다음과 같이 할당될 값이 모자라다면 어떻게 될까.

let [a,b,c] = [1,2];

> 결과로 let c 는 undefined의 값을 갖는다.

undefined가 되는 것을 막기 위해서 기본값을 줄 수 있다.

let [a=3,b=4,c=5] = [1,2];

> 결과로 a=1, b=2, c=5의 값을 갖는다.

---

일부 반환값 무시

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

바꿔치기

구조 분해 할당에서, 두 변수의 값을 바꿀 때 더이상 제 3의 변수가 필요하지 않다. (흔히 temp로 사용하는 변수)

let a =1;
let b =2;
[a,b] = [b,a];

> a=2
> b=1

객체 구조 분해

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

let {name, age} = user;

> name = 'Mike'
> age = 30

---

새로운 변수 이름으로 할당

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

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

> userName = 'Mike'
> userAge = 30

---

객체 구조에서도 할당될 값이 없을 경우에,
기본값을 줄 수 있다.

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

let {name, age, gender} = user;
> gender = undefined

or 

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