2022-05-17
구조 분해 할당이란?
- MDN 정의에 따르면 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식
- js 뿐만 아니라 C언어에도 있는 문법인 것 같다
예시를 살펴보자.
기본값
MDN에 따르면 변수에 기본값을 할당하면, 분해한 값이 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) // 2null을 대신 0을 넣어도 x는 0이 나온다.
빈 배열을 넣었을 때도 0이 나올 줄 알았는데, x의 값이 잘 나온다.
분해한 값이 undefinde일 때 그 값을 대신 사용한다는 말이 이 말인가보다.
객체에서 변수 재할당
const basket = {
shineMusket: 12000,
tangerine: 8000
}basket 객체 안에 tangerine이라는 property를 grapeFruit으로 바꾸고 싶다
구조 분해 할당 없이 변수명 재할당
const grapeFruit = basket.tangerine새로운 변수명에 basket의 tangerine과 같은 값을 대입해준다.
그러면 구조 분해 할당 없이 재할당이 가능하다.
구조분해 할당을 이용한 변수명 재할당
const { tangerine: grapeFruit } = basket
console.log(grapeFruit) //8000
console.log(basket) // let basket = { shineMusket: 12000, tangerine: 8000}basket이라는 원본 객체의 값은 변하지 않지만, grapeFruit 변수에 basket.tangerine과 동일한 값을 적용했다.
흔하디 흔한 리액트 객체 구조 분해 할당 예시
//생략
this.state = {
like: 0,
follow: 0
}
//생략
const { like, follow } = this.state;props를 받아오거나 클래스형 컴포넌트에서의 state 값을 쓸 때, 구조 분해 할당을 이용해주면 반복되는 당연한 단어들을 줄여줘서 좀 더 편리하다
배열에서 변수 재할당
const cafeMenu = ['iceLatte', 'iceDolceLatte']cafeMenu 배열에서 myPick이라는 변수에 iceLatte를, yourPick이라는 변수에 iceDolceLatte를 할당하고 싶을 때
구조분해 할당 없이 변수명 재할당
const myPick = cafeMenu[0];
const yourPick = cafeMenu[1];새로운 변수명에 cafeMenu 배열 안의 값을 대입해준다.
그러면 구조 분해 할당 없이 재할당이 가능하다.
구조분해 할당을 이용한 변수명 재할당
const [myPick, yourPick] = cafeMenu
console.log(myPick) // 'iceLatte'
console.log(yourPick) // 'iceDolceLatte'
console.log(cafeMenu) // ['iceLatte', 'iceDolceLatte'])cafeMenu라는 원본 배열 값의 변화 없이 새로운 변수에 basket.tangerine과 동일한 값을 적용했다.
rest가 들어갈 경우
MDN 설명에 따르면, 배열을 구조 분해할 경우, 나머지 구문을 이용해 분해하고 남은 부분을 하나의 변수에 할당할 수 있다고 한다.
아래는 예시이다.
const [a, ...maybe] = ['보건', '보건교사다', '나를아느냐', '나는안은영']
console.log(a) // '보건'
console.log(maybe) // ['보건교사다', '나를아느냐', '나는안은영']심화 - for of 문에서 구조 분해 할당
Object.entries를 이용해 객체에서 각각의 key, value를 뽑아내려고 할 때
const user = {
userName: 'dooreplay',
level: 6445
}
for(let [key, val] of Object.entries(user)) {
console.log(`${key} : ${val}`)
}
// 'userName : dooreplay'
// 'level : 6445'이렇게 할 경우 콘솔을 찍어보면 userName과 level 정보가 차례로 찍힌다.
근데 user가 여러 명일 경우에는 어떻게 될까?
const userInfo = [{
userName: 'dooreplay',
level: 6445
},{
userName: 'OSPark',
level: 7630
},{
userName: 'soooni',
level: 1245
}]이 경우에는 객체 구조 분해 할당을 이용한다.
const showUserInfo = arr => {
for(let {userName: n, level: l} of arr) {
console.log(`캔디크러쉬 사용자 정보를 알려드립니다. 사용자 이름은 ${n}이고, 레벨은 ${l} 입니다`)
}
}
showUserInfo(userInfo)