[Javascript] 구조 분해 할당(Destructuring assignment)

구조 분해 할당이란?

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

---

배열 구조 분해

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

console.log(user1);  // 'Mike'
console.log(user2);  // 'Tom'
console.log(user3);  // 'Jane'

let [user1, user2, user3] = users; 은 let user1 = users[0]; let user2 = users[1]; let user3 = users[3]; 과 같다.

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

console.log(user1);  // 'Mike'
console.log(user2);  // 'Tom'
console.log(user3);  // 'Jane'

split 함수를 이용해 문자열을 잘라서 할당하는 것도 가능하다.

 

배열 구조 분해 : 기본값

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

기본값을 주면 에러를 방지할 수 있다. 값이 undefined이면 기본값을 사용한다.

 

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

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

console.log(user1);  // 'Mike'
console.log(user2);  // 'Jane'

user1에 'Mike'가 들어가고 두 번째 반환값은 무시된다. user2에 'Jane'이 들어가고 네 번째 반환값도 무시된다.

 

배열 구조 분해 : 바꿔치기

let a = 1;
let b = 2;

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

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

---

객체 구조 분해

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

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

let {name, age} = user; 은 let name =user.name; let age = user.age; 와 같다.

배열 구조 분해와 다른 점은 순서를 신경쓰지 않아도 된다. name과 age의 순서를 바꾸어도 동일하게 동작한다.

 

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

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 user = {name: 'Mike', age: 30};
let {name, age, gender = 'male'} = user;

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

기본값을 주면 에러를 방지할 수 있다. 값이 undefined이면 기본값을 사용한다.