JavaScript DAY11 (2022.11.20)

구조분해 할당이란?

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

/* 배열 구조분해 */
let [x, y] = [1, 2];
// x = 1
// y = 2

/* ----------------------------------------------------------- */

let users = ['조', '준', '영'];
let [user0101, user0102, user0103] = users;
// user1 = '조'
// user2 = '준'
// user3 = '영'

/* ----------------------------------------------------------- */

let users2 = "조-준-영";
let [user0201, user0202, user0203] = users2.split('-');
// user0201 = '조'
// user0202 = '준'
// user0203 = '영'

/* ----------------------------------------------------------- */

// 해당하는 값이 없다면 어떻게 될까?
let [a, b, c] = [1, 2];
// c는 undefined가 된다. 이러한 경우에는 기본값을 주면, 에러를 방지 할 수 있다.
let [d = 1, e = 2, f = 3] = [5, 4];
// d = 5 <= 기본값을 주었지만. 배열에서 얻어 온 값으로 변한다.
// e = 4 <= 기본값을 주었지만. 배열에서 얻어 온 값으로 변한다.
// f = 3 <= undefined이기 때문에 기본값 3을 유지한다.

/* ----------------------------------------------------------- */

// 일부 반환값 무시의 경우
let [g, ,h] = ['엥', '엥', '츈'];
// g = '엥'
// h = '츈'

/* ----------------------------------------------------------- */

// 할당 된 변수를 바꾸기
let i = 1;
let j = 2;
// k라는 변수를 i값을 저장하기 위해 임시로 만들고 i의 값을 가져온다. (바로 i = j를 때려버리면 j는 i의 값을 가져올 수가 없으니까!)
let k = i;
i = j;
j = k;
// i = 2
// j = 1

// 구조분해 할당을 사용하면 위에 같은 번거로운 작업은 필요가 없다.
let l = 1;
let m = 2;
[l, m] = [m, l];
// l = 2
// m = 1





/* 객체 구조분해 */
let users3 = {name: '조준탄', age: 26};
let {name, age} = users3; // <= name과 age의 순서를 바꿔도 동일하게 동작한다.
// name = '조준탄'
// age = '26'

/* ----------------------------------------------------------- */

// 새로운 변수의 이름으로 할당 <= 프로퍼티의 이름으로만 사용해야 하는건 아니다!
let {name: isName, age: isAge} = users3;
// isName = '조준탄'
// isAge = 26

/* ----------------------------------------------------------- */

// 배열 구조분해와 마찬가지로 기본값을 줄 수 있다.
let {name: isName2, age: isAge2, gender = 'male'} = users3 // <= gender는 undefined이기 때문에 기본값을 줘 에러를 방지 할 수 있다.
// isName2 = '조준탄' 
// isAge2 = 26
// gender = 'male'