{}의 원래목적 과 비구조분해 할당

타입스크립트를 별도의 설정없이사용하다보면

파일이 분리되어있어도 각각 모듈로 인식하지않고 하나로 인식할때가 있다.

아마 설정을 해주어야할텐데, 그때 코드 전체를 {} 으로감쌈으로써, 모듈화를 할수있다.

 

구조분해할당 시 아래 코드는 에러가나지만

let title, width, height;

// SyntaxError: Unexpected token '=' 이라는 에러가 아랫줄에서 발생합니다.
{title, width, height} = {title: "Menu", width: 200, height: 100};

 

아래 코드는 에러가 나지 않는다.

let title, width, height;

// 에러가 발생하지 않습니다.
({title, width, height} = {title: "Menu", width: 200, height: 100});

alert( title ); // Menu

 

첫번째 코드는 {} statement를 묶는 용도로 인식해버려서, 선언하지 않은 변수들이 되버리는 것이고,

()를 한번더 감쌈으로써, 하나의 표현식으로 해석하도록 해야한다.

 

Nested destructuring 

구조분해할당의 Depth를 더 깊게 갈 수 도있다.

let options = {
  size: {
    width: 100,
    height: 200
  },
  items: ["Cake", "Donut"],
  extra: true
};

// 코드를 여러 줄에 걸쳐 작성해 의도하는 바를 명확히 드러냄
let {
  size: { // size는 여기,
    width,
    height
  },
  items: [item1, item2], // items는 여기에 할당함
  title = "Menu" // 분해하려는 객체에 title 프로퍼티가 없으므로 기본값을 사용함
} = options;

함수 파라미터 비구조분해 할당

구조분해할당할때 default value는 아래와같은 방식으로 넣어주면된다.

function({
  incomingProperty: varName = defaultValue
  ...
})

 

비구조분해할당으로 파라미터를 받게되면 빈객체라도 명시적으로 넘겨줘야 에러가 발생하지 않는다

showMenu({}); // 모든 인수에 기본값이 할당됩니다.

showMenu(); // 에러가 발생할 수 있습니다.