구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.
배열 분해하기
배열이 어떻게 변수로 분해되는지 예제를 통해 살펴봅시다.
split 같은 반환 값이 배열인 메서드를 함께 활용해도 좋습니다.
쉼표를 사용하면 필요하지 않은 배열 요소를 버릴 수 있습니다.
객체 분해하기
할당 연산자 우측엔 분해하고자 하는 객체를, 좌측엔 상응하는 객체 프로퍼티의 '패턴’을 넣습니다.
객체 프로퍼티를 프로퍼티 키와 다른 이름을 가진 변수에 저장해봅시다.
콜론은 '분해하려는 객체의 프로퍼티: 목표 변수’와 같은 형태로 사용합니다. 위 예시에선 프로퍼티 width를 변수 w에, 프로퍼티 height를 변수 h에 저장했습니다.
프로퍼티가 없는 경우를 대비하여 =을 사용해 기본값을 설정하는 것도 가능합니다.
콜론과 할당 연산자를 동시에 사용할 수도 있습니다.
나머지 패턴 ‘…’
나머지 패턴(rest pattern)을 사용하면 배열에서 했던 것처럼 나머지 프로퍼티를 어딘가에 할당하는 게 가능합니다.
중첩 구조분해
객체나 배열이 다른 객체나 배열을 포함하는 경우, 좀 더 복잡한 패턴을 사용하면 중첩 배열이나 객체의 정보를 추출할 수 있습니다. 이를 중첩 구조 분해(nested destructuring)라고 부릅니다.
오!