자바스크립트 - 구조 분해 할당(Destructuring assignment)

구조 분해 할당

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

 

배열구조분해

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

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

 

다음 코드도 보겠습니다. 

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

let[user1, user2, user3] = users;

console.log(user1, user2, user3);

let[user1, user2, user3] =users; 는 

아래의 코드와 같습니다. 

let user1 = users[0];

let user1 = users[0];

let user1 = users[0]; 

결과는 아래입니다. 

 

 

 

 

배열 구조 분해 : 기본값

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'

 

 

배열 구조 분해 : 바꿔치기

 

기존에는 새로운 변수 c를 만들어 바꿔줘야했는데 아래의 방법처럼 편리하게 바꿀 수 있습니다.

let a = 1;
let b = 2;

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

 

객체 구조 분해

객채구조분해도 배열구조분해와 크게 다르지 않습니다. 한가지 다른점은 순서를 신경쓰지 않아도 된다는 점입니다. 

아래의 코드에서 

let{age,name}=user; 를 사용해도 똑같습니다. 

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

let {name,age}=user;

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

 

그리고 객체의 프로퍼티를 바꿀 수 도 있습니다. 

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

 

객채 구조 분해 : 기본값

객채구조분해도 배열구조분해의 기본값처럼 기본값을 줄 수 있습니다. 

값이 undefined일때만 기본값을 사용합니다. 

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

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

console.log(gender); // female