구조 분해 할당(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); // 'Mike'
console.log(user2); // 'Tom'
console.log(user3); // 'Jane'

문자열에서 배열을 뽑아주는 split 을 활용한다면,

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

str.split('-'); //['Mike', 'Tom', 'Jane']

해당하는 값이 없다면 undefined 가 들어갑니다. 그래서 기본값을 아래처럼 세팅하기도 합니다.

let [a, b, c] = [1, 2];
let [a=3, b=4, c=5] = [1, 2]; // 기본값 세팅된 상태

빈 공백을 만들어 일부 반환값을 무시할 수도 있습니다.

let [user1,  ,user2] = ['Mike', 'Tom', 'Jane', 'Tony']; 
// 두번째 빈공백은 대치되는 값 가져오지 않는다.

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

할당된 변수를 쉽게 바꿀 수 있습니다.

let a = 1;
let b = 2; 

[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};
let {name: userName, age: userAge} = user; 

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

기본값도 줄 수 있습니다.

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

console.log(gender); // 'female'
// 기존 객체에 이 값이 없다면, 기본값이 male 이 나온다.
// 객체로 받은 값이 undefined 일 때만 기본값이 사용된다.