구조 분해 할당(destructing assignment)

구조 분해 할당(destructing assignment)이란?

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript *표현식

* 표현식이란 값으로 귀결되는 임의의 유효한 코드 단위

비구조화할당이라고도 함

객체 분해

let {prop: varName = default, ...rest} = object

object의 속성 prop의 값이 변수 varName에 할당. prop 없는 경우 default 값이 할당됨
object의 나머지 속성들이 객체 rest에 복사됨

배열 분해

let [item1 = default, item2, ...rest] = array

array요소들이 순서대로 item1, item2에 할당. 할당할 값이 없는 경우 default 값이 할당됨
array의 나머지 요소들이 배열 rest에 복사됨

활용: 함수 매개변수

함수 매개변수에서 구조 분해 할당을 사용하는 경우,

• 인자(parameter)와 인수(argument)의 순서가 상관 없음
• 인수가 인자를 모두 채울 필요가 없음
  • 변경 필요 없이 디폴트 값을 사용해도 무방하다면, 굳이 해당하는 인수를 null 값으로 명시할 필요 없음
  • 예를 들어 showMenu() 이렇게 인수 없이 호출해도 무방
• 함수 호출부에서 반드시 객체를 인수로 넘겨 주어야한다.
  • 자 부분에 있는 ={}: 빈 객체를 넘겨주는 디폴트의 역할을 해서 showMenu()처럼 인수 없이 호출 가능

let options = {
  title: "My menu",
  items: ["Item1", "Item2"]
};

showMenu(options);
// 결과: `My menu 100 200`

function showMenu({ title = "Menu", width = 100, height = 200 } = {}) {
  alert( `${title} ${width} ${height}` );
}

참고 자료

• mdn web docs - 구조 분해 할당
• JAVASCRIPT.INFO - 구조 분해 할당