함수매개변수와 구조분해할당

function fn(width){
  console.log(width);
}
fn(100);

function fn([width]){
  console.log(width);
}
fn([100]);

function fn({width}){
  console.log(width);
}
fn({width:100});

자바스크립트는 함수인자와 매개변수를 구조분해할당을 지원한다.
구조분해의 첫번째 장점은 필요한 인자만 취할수 있다는 것이다.

function showMenu(title = "Untitled", width = 200, height = 100, items = []) {
  // ...
}
showMenu("My Menu", undefined, undefined, ["Item1", "Item2"])

구조분해를 사용하지 않으면 위와 같이 인자갯수에 맞추어야 하고 가독성이 떨어진다.
따라서 구조분해를 사용하는것이 좋다.

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

function showMenu({title = "Untitled", width = 200, height = 100, items = []}) {
  alert( `${title} ${width} ${height}` ); // My Menu 200 100
  alert( items ); // Item1, Item2
}
showMenu(options);

함수에 전달할 객체를 미리 정의하기때문에 가독성이 좋아지고 함수호출시에는 객체만 전달하면 된다.

함수매개변수는 객체구조분해할당을 사용하여 원하는 프로퍼티와 기본값등을 사용하면 유연성이 좋아진다.

showMenu({});

위와같이 빈객체를 전달하면 정상적인 객체구조분해할당이 이루어진다. 그러나 프로퍼티들의 값들은 초기값이 없으면 undefined가 할당되고 스크립트가 중단되지 않는다.

showMenu();

let {name} = undefind;와 같이 우항에 객체가 없으면 에러가 발생한다.

function f1({title:t,items,width=100,height=200}={}){
	....
}

매개변수 객체의 기본값을 제공하면 되는 것이다.