[JavaScript] 구조분해할당 (Destructuring)

구조 분해 할당이란 ?

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

기본값

변수에 기본값을 할당하면, 분해한 값이 undefined일 때 그 값을 대신 사용한다.

let x, y

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

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

위의 경우 배열에 1이라는 값이 들어갔기 때문에 x는 1이다.
null이나 0이 들어가는 경우는 어떻게 될까 ?

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

null 대신 0을 넣어도 x는 0이 나온다.
빈 배열을 넣으면 x의 값이 1로 나온다.
분해한 값이 undefined일 때 그 값을 대신 사용한다는 말이 이 말이다.

객체에서 변수 재할당

basket 객체 안의 tangerine이라는 property를 grapeFruit로 바꿀 경우

const basket = {
 	shineMusket: 12000,
  	tangerine: 8000
}

1. 구조분해 할당 없이 변수명 재할당

const grapeFruit = basket.tangerine

새로운 변수명에 basket의 tangerine과 같은 값을 대입해준다.

2. 구조분해 할당을 이용해 변수명 재할당

const { tangerine: grapeFruit } = basket
console.log(grapeFruit);	// 8000
console.log(basket);					       // let basket = { shineMusket: 12000, tangeringe: 8000 }

basket이라는 원본 객체의 값은 변하지 않지만 grapeFruit 변수에 basket.tangering와 동일한 값을 적용했다.

배열에서 변수 재할당

cafeMenu 배열에서 myPick라는 변수에 iceLatte를, yourPick라는 변수에 iceDolceLatte를 할당하고 싶을 경우

const cafeMenu = ['iceLatte', 'iceDolceLatte']

1. 구조분해 할당 없이 변수명 재할당

const myPick = cafeMenu[0];
const yourPick = cafeMenu[1];

새로운 변수명에 cafeMenu 배열안의 값을 대입해준다.

2. 구조분해 할당을 이용해 변수명 재할당

const [myPick, yourPick] = cafeMenu
console.log(myPick);			// 'iceLatte'
console.log(yourPick);			// 'iceDolceLatte'
console.log(cafeMenu);	  // ['iceLatte', 'iceDolceLatte']

cafeMenu라는 원본 배열 값의 변화 없이 새로운 변수에 값을 할당

로그인 로직에서의 배열 구조 분해 할당

const [shouldBeBearer, token] = req.headers.authorization.split(' ');

로그인 시 나오는 token은 Bearer hbTeF4m9hwXiojVHl3OobCOpunP-Rcas... 이런 식으로 Bearer 띄어쓰고 토큰값이 string 형태로 나온다. 따라서 띄어쓰기 단위로 split 해준 후에 Bearer와 token을 분리해준다. 사용시에 token값을 가져다가 사용한다.

rest가 들어갈 경우

배열을 구조 분해할 경우, 나머지 구문을 이용해 분해하고 남은 부분을 하나의 변수에 할당할 수 있다고 한다.

const [a, ...maybe] = ['안녕', '나는', '풀스택', '개발자']
console.log(a);						// '안녕'	
console.log(maybe);					// ['나는', '풀스택', '개발자']

for of문에서 구조 분해 할당

Object.entries를 이용해 객체에서 각각의 key, value를 뽑아내려고 할 경우

const user = {
 	userName: 'jinhyeok',
  	level: 1234
}

for (let [key, val] of Object.entries(user)) {
 	console.log(`${key}: ${val}`);
}

user가 여러명일 경우

const userInfo = [
  {
    userName: 'jinhyeok',
    level: 1234
  }, {
   	userName: 'jinhyeok2',
    level: 100
  }, {
    userName: 'jinhyeok3',
    level: 200
  }
]

const showUserInfo = arr => {
 	for(let { userName: n, level: l } of arr) {
     	console.log(`사용자 이름은 ${n}이고 레벨은 ${l} 입니다.`);
    }
}

showUserInfo(userInfo);