구조분해할당

객체와 배열은 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(' ');

인덱스를 이용해 배열에 접근하지 않고 이름과 성을 사용할 수 있게 되었다.

'분해(destructuring)'는 '파괴(destructive)'를 의미하지 않습니다.

구조 분해 할당이란 명칭은 어떤 것을 복사한 이후에 변수로 '분해(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 값을 쓸 때 구조 분해 할당을 이용해주면

반복되는 당연한 단어들을 줄여줘서 좀 더 편리하게 이용할 수 있다.

For of를 이용한 구조분해할당 + 예시

유저가 여러개 들어있는 경우

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 를 이용해서 유저를 하니씩 빼기도 가능