구조분해 할당 Destructuring을 익히자!

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

구조 분해 할당 - JavaScript | MDN

 

객체나 배열의 속성을 보다 쉽게 추출 해주는 문법이다.

 

어떤느낌인지 예제를 통해 알아보자.

 

객체에서의 구조분해 할당

자바스크립트 객체에서 name과 age를 디스트럭쳐링을 사용하여 추출하고 출력 하였다.

기억해야할 점은 객체 디스트럭쳐링에서는 obj안의 'key'를 그대로 사용하여 분해한다는 것이다.

 

그렇다면 중첩객체는 어떻게 표현할까?

const movie = {
  title: "Inception",
  director: "Christopher Nolan",
  release: {
    year: 2010,
    month: "July"
  }
};

 

위 코드에서 title과 year 를 구조분해 하려면? 

year 은 release 에 중첩객체로 존재하게 되는데 , 이는 구조분해 할당을 한번 더 해주어야 한다.

const { title, release: { year } } = movie;
console.log(title); // Inception
console.log(year);  // 2010

 

그렇다면 변수명이 변경되었을때는 ?

 

위 코드에서 함수안에 구조분해할당을 하여 name과 roomType이 잘 출력되는것을 확인 할 수있다.

그런데 firstDate라는 변수명이 없으니 당연히 undefined가 떴다.

• 이것도 역시 중첩객체처럼 한번 더 할당 해주면 된다.

const {name, roomType, date: firstDate} = user;

 

배열에서의 구조분해할당

 

배열은 위치(index)가 중요하다.

const [frist, third] = numbers;

 

• 이렇게 구조분해 할당 하였다면 배열에서는 인덱스 기반이기 때문에 (third는 두번째에 위치하고 있어서) 아쉽지만 10,20이 출력된다. 
• 순서를 스킵하고싶을때 그냥 공백으로 비워두면 된다. [first, , third] = numbers

 

한줄로 정리하자면 구조분해 할당을 할때 객체는key값을 기준으로, 배열은 순서(index)를 기준으로 한다.