객체와 배열은 JS에서 가장 많이 쓰이는 것이다.
키를 가진 데이터 여러 개를 하나의 개체에 저장할 떈 객체를, 컬랙션에 데이터를 순서대로 저장할 땐 배열을 사용
근데, 개발을 핳다보면 함수에 객체나 배열을 전달해야 하는 경우가 생긴다. 가끔은 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 생기기도 한다.
이럴 때 변수로 ‘분해' 할 수 있게 해주는 특별한 문법인 구조 분해 할당(destructuring assignment)을 사용할 수 있다.
이 외에도 함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우 등에 구조 분해를 사용한다.
// 이름과 성을 요소로 가진 배열
let arr = ["Bora", "Lee"]
// 구조 분해 할당을 이용해
// firstName엔 arr[0]을
// surname엔 arr[1]을 할당하였습니다.
let [firstName, surname] = arr;
alert(firstName); // Bora
alert(surname); // Lee
// split 같은 반환 값이 배열인 메스드를 함께 활용해도 좋다.
let [firstName, surname] = "Bora Lee".split(' ');
인덱스를 이용해 배열에 접근하지 않고 이름과 성을 사용할 수 있게 되었다.
구조 분해 할당이란 명칭은 어떤 것을 복사한 이후에 변수로 '분해(destructurize)'해준다는 의미 때문에 붙여졌습니다. 이 과정에서 분해 대상은 수정 또는 파괴되지 않습니다.
배열의 요소를 직접 변수에 할당하는 것보다 코드 양이 줄어든다는 점만 다릅니다.
let [firstName, surname] = arr;
let firstName = arr[0];
let surname = arr[1];
구조 분해 할당으로 객체도 분해할 수 있다. 기본 문법은 다음과 같다.
let {var1, var2} = {var1:…, var2:…}
할당 연산자 우측엔 분해하고자 하는 객체를, 좌측엔 상응하는 객체 프로퍼티의 '패턴’을 넣는다.
// 분해하려는 객체 프로퍼티의 키 목록을 패턴으로 사용하는 예시
let options = {
title: "Menu",
width: 100,
height: 200
};
let {title, width, height} = options;
alert(title); // Menu
alert(width); // 100
alert(height); // 200
프로퍼티 options.title과 options.width, options.height에 저장된 값이 상응하는 변수에 할당된 것을 확인할 수 있다!
// 생략
this.state = {
like: 0,
follow: 0
}
// 생략
const { like, follow } = this.state;
props를 받아오거나 클래스형 컴포넌트에서의 state 값을 쓸 때 구조 분해 할당을 이용해주면
반복되는 당연한 단어들을 줄여줘서 좀 더 편리하게 이용할 수 있다.
유저가 여러개 들어있는 경우
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)
이런식으로 for of 를 이용해서 유저를 하니씩 빼기도 가능