[JavaScript] 구조 분해 할당 (Destructurning assignment)

구조 분해 할당 (Destructurning assignment)

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

 

배열 구조 분해

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

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

x에 1이 들어가고 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'

user1, user2, user3변수를 대괄호로 묶은 뒤 선언하고 user배열을 할당했다.

let [user1, user2, user3] = users; 코드의 의미는 아래와 같다.

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

구조 분해 할당을 이용해서 순서대로 선언된 변수에 할당한다.

 

 

배열 구조 분해 : 기본값 

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

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

a에는 1이 들어가고 b에는 2가 들어간다. 

그리고 c에는 undefined가 들어간다.

이럴 때, 아래 예제와 같이 기본값을 주면 오류를 미연에 방지할 수 있다.

//let [a,b,c] = [1,2];
let [a=3, b=4, c=5] = [1,2]; //변수에 기본값 설정

console.log(a); // 1
console.log(b); // 2
console.log(c); // 5

a와 b는 배열에서 얻어온 값 1, 2가 되었고 c는 기본값 5를 유지한다.

 

 

배열 구조 분해 : 일부 반환값 무시

공백과 쉼표를 이용해 필요하지 않은 일부 반환값을 무시할 수 있다.

두번째요소('Tom')와 네번째 요소('Tony')는 할당받는 값이 없으므로 무시되었다.

 

 

배열 구조 분해 : 바꿔치기

let a = 1;
let b= 2;

a와 b의 값을 서로 바꾸기 위해서는 어떻게 해야할까?

a = b;의 코드로는 기존의 a값이 사라지므로 아래와 같이 의미없는 변수를 한 개 이상  만들어야 했다.

let c = a; // c: 임시변수
a = b;
b = c;

 

하지만 이럴 때 구조 분해 할당은 굉장히 편리하다.

임시 변수 c는 필요하지 않다.

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

 

객체 구조 분해 

지금까지 배열 구조 분해를 알아보았다. 객체도 구조 분해가 가능하다.

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

let {name, age} = user;
//let {age, name} = user;

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

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

-user 객체가 있고 name, age 프로퍼티가 있다.

 

let {name, age} = user;

-중괄호로 감싼 변수선언이 있고 user 객체를 할당했다.

아래 코드와 같다.

let name = user.name;

let age = user.age;

 

배열구조분해와 다른점이 있다면 순서를 신경쓰지 않다도 된다는 점이다.

let {age, name} = user; 

-age와 name의 순서를 바꾸어도 동일하게 동작한다.

 

 

객체 구조 분해 : 새로운 변수 이름으로 할당

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

//let {name, age} = user;
let {name: userName, age: userAge} = user; //변수 이름 변경

console.log(userName); // 'Mike'
console.log(userAge); // 30

name을 userName으로, age를 userAge로 변경하였다.

이제 user객체의 name프로퍼티는 userName이란 이름으로 사용할 수 있다.

age프로퍼티도 마찬가지로 변경한 userAge로 사용한다.

 

객체 구조 분해 :  기본값

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

let {name, age, gender} = user; // gender : undefined

배열과 마찬가지로 객체를 분해할 때도 기본값을 줄 수 있다.

gender 변수는 user객체에 gender가 없어 undefined가 들어간다. 이럴 때 기본값을 사용하면 된다.

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

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

이제 user객체에 gender가 없으면 'male'이 기본값으로 할당된다.

 

let user = {
  name: 'Jane',
  age: 18,
  gender: 'female'
};

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

console.log(gender); //'female'

user객체에 gender가 있다면 그 값이 사용된다.

객체로부터 받은 값이 undefined일 때만 기본값이 사용된다는 것을 기억하자.