함수 매개변수 목록에서 디스트럭처링

디스트럭처링

디스트럭처링(Destructuring)은 구조화된 배열 또는 객체를 Destructuring(비구조화, 파괴)하여 개별적인 변수에 할당하는 것이다. 배열 또는 객체 리터럴에서 필요한 값만을 추출하여 변수에 할당하거나 반환할 때 유용하다.

 

디스트럭처링 구문은 함수 매개변수 목록에서도 사용할 수 있다. 함수가 객체를 포함하는 매개변수를 수락하는 경우, 객체 프로퍼티를 “꺼내어’” 로컬 범위 변수(즉, 함수 본문 내에서만 사용할 수 있는 변수)로 사용할 수 있도록 함수를 디스트럭처링할 수 있다.

function storeOrder(order) {
  localStorage.setItem('id', order.id);
  localStorage.setItem('currency', order.currency);
}

storeOrder 함수 본문 내부의 점 표기법을 통해 order 프로퍼티에 접근하지 않고, 다음과 같이 디스트럭처링을 사용할 수 있다.

 

function storeOrder({id, currency}) { // 디스트럭처링
  localStorage.setItem('id', id);
  localStorage.setItem('currency', currency);
}

상수나 변수를 수동으로 생성하지 않는다. 대신, 들어오는 객체(즉, storeOrder 에 인수로 전달된 객체)에서 id와 currency 를 꺼내어 사용한다. storeOrder 는 여전히 하나의 매개변수만 받는다. 매개변수는 두 개가 아니라, 하나의 매개변수, 즉 내부적으로 디스트럭처링된 객체만 받는다.

 

storeOrder({id: 5, currency: 'USD', amount: 15.99}); // 1개의 매개변수 / 값!