구조분해할당

구조분해할당

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

배열

let [x, y] = [1, 2];
console.log(x);
console.log(y);
//1
//2

• 예제를 살펴보면 x의 값은 1이되고 y의 값은 2가 된다.

좀 더 살펴보자....

let users = ['Mike', 'Tom', 'Jane'];
let [user1, user2, user3] = users;
console.log(user1);
console.log(user2);
console.log(user3);

• 출력하게 되면 user1,2,3의 값은 Mike, Tom, Jane이다. 이유는

let [user1, user2, user3] = users; 

let user1 = users[0];
let user1 = users[1];
let user1 = users[2];

두 코드 모두 같은 의미를 가지고있기 때문이다.

만약 해당하는 값이 없으면 어떻게 될까?

let [x, y, z] = [1, 2];
console.log(x);
console.log(y);
console.log(z);

x,y는 1,2 출력되고 z는 undefined가 나온다.

반환값을 무시 할 수 있다

let [user1, ,user2] = ['Mike', 'Tom', 'Jane','John'];
console.log(user1);
console.log(user2);

user1,2 값은 Mike, Jane이 출력되고 Tom,John은 할당 받는곳이 없어 무시된다. 쉼표와 공백으로 필요하지 않는 배열을 무시 할 수 있다.

배열은 서로 바꿔치기 할 수 있다.

let a = 1;
let b = 2;

a에 b값을 넣고 b에 a값을 넣고 싶을 때 다음과 같이 작성하면 된다.
[a, b] = [b, a]

객체

let user = {name: 'Mike', age: 30};
let {name, age} = user;
console.log(name); // Mike
console.log(age); // 30

결과값으로 Mike, 30이 나온다.

let {name, age} = user; 

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

• 배열과 크게 다르지 않기 때문에 두 코드 모두 같은 의미를 가진다.
• let {name, age} 에서 name, age 자리가 바뀌어도 상관없다.

프로퍼티의 키 값을 무조건 사용하도 되는건 아니다.
새로운 변수 이름으로 할당 할 수 있다.

let user = {name: 'Mike', age: 30};
let {name: userName, age: userAge} = user;
console.log(userName); // Mike
console.log(userAge); // 30