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

배열 구조 분해

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

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

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

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

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

배열 구조 분해 : 기본값

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

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

undefined가 들어간다.
a에는 1이 들어가고, b에는 2가 들어가지만, c에는 undefined가 들어간다!

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

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

이 때 기본값을 주면 에러를 방지할 수 있다.

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

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

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

공백과 쉼표를 이용해서 필요하지 않는 배열을 무시할 수 있다. 첫번째 요소는 user1에 들어가고, 두번째 요소는 생략, 세번째 요소는 user2에 할당되어진다.

배열 구조 분해 : 바꿔치기

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

기존에는 이미 할당 된 변수를 바꾸려면 의미없는 변수를 하나 더 만들어야 했다.

let a = 1;
let b = 2;

// a = b; -> 기존의 a의 값이 사라짐
let c  = a;
a = b;
b = c;

객체 구조 분해

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

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

객체 구조 분해는 순서에 신경쓰지 않아도 된다. 즉, const {name, age} = user;나 const {age, name} = user;으로 해도 동일하게 동작한다.

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

const user = {name: 'Mike', age: 30};
const {name, age} = user;
const {name: userName, age: userAge} = user;

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

프로퍼티 키로 무조건 사용해야하는 것은 아니다. :로 새로운 변수 이름을 할당해서 사용할 수 있다.

객체 구조 분해 : 기본값

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

---------------------------------------
  
const {name, age, gender = 'male'} = user;
console.log(gedner) // 'male'

---------------------------------------
  
const user = {
	name: 'Jane',
  	age: 18,
  	gender: 'female'
}
const {name, age, gender = 'male'} = user;
console.log(gender) // 'female'

배열과 마찬가지로 객체를 분해할 때에도 기본값을 줄 수 있다. 객체로 부터 받은 값이 undefined일때에만 기본값이 사용된다.

---

출처)