> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/typescript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/typescript/ts-vs-es6/destructure.md).

# 비구조화 할당

비구조화 할당은 배열, 객체의 아이템 또는 속성을 변수에 할당할 때 유용합니다.

**작성 코드:**

{% code title="TypeScript" %}

```typescript
// 배열 비구조화 할당
let [html, , body] = [document.documentElement, document.head, document.body];

// 객체 비구조화 할당
let numbers_module = {
    multiplyNumbers: (...n:number[]):number => n.reduce((a, b) => a * b),
    sumNumbers: (...n:number[]):number => n.reduce((a, b) => a + b)
};

let { sumNumbers } = numbers_module;
```

{% endcode %}

**컴파일 코드:**

{% code title="JavaScript" %}

```javascript
// 배열 비구조화 할당
var _a   = [document.documentElement, document.body],
    html = _a[0],
    body = _a[2];

// 객체 비구조화 할당
var numbers_module = {
  multiplyNumbers: function () {
    var n = [];
    for (var _i = 0; _i < arguments.length; _i++) {
      n[_i] = arguments[_i];
    }
    return n.reduce(function (a, b) { return a * b; });
  },
  sumNumbers: function () {
    var n = [];
    for (var _i = 0; _i < arguments.length; _i++) {
      n[_i] = arguments[_i];
    }
    return n.reduce(function (a, b) { return a + b; });
  }
};

var sumNumbers = numbers_module.sumNumbers;
```

{% endcode %}

TypeScript 비구조화 할당은 ES6의 비구조화 할당에 추가적으로 다음과 같은 것을 할 수 있습니다. `sumNumbers?` 코드에서 `?`의 의미는 속성이 있을 경우 `sumNumbers` 속성에 할당하고, 없을 경우 속성 할당을 하지 않습니다. 즉, 선택적으로 존재할 경우만 속성을 할당합니다.

`sumNumbers:sum = (...n:number[]):number => n.reduce((a, b) => a + b)` 코드는 `o` 객체에 `sumNumbers` 속성이 없을 경우, 기본 값 `(...n:number[]):number => n.reduce((a, b) => a + b)`을 설정(`=`)한 것입니다. 그리고 `:sum`을 통해 속성 이름을 `sumNumbers` 대신 `sum`으로 사용하도록 합니다.

**작성 코드:**

{% code title="TypeScript" %}

```typescript
let numbers_module: { multiplyNumbers: () => number } = {
  multiplyNumbers: (...n: number[]): number => n.reduce((a, b) => a * b)
};

// ?는 선택적으로 설정할 때 사용합니다. (ES6에서는 지원하지 않습니다)
let o: { multiplyNumbers: () => number; sumNumbers?: any } = numbers_module;

// sumNumbers 속성이 없을 경우, sum 속성에 기본 값을 설정합니다.
let {
  multiplyNumbers: multiply,
  sumNumbers: sum = (...n: number[]): number => n.reduce((a, b) => a + b)
} = o;
```

{% endcode %}

**컴파일 코드:**

{% code title="JavaScript" %}

```javascript
var numbers_module = {
  multiplyNumbers: function () {
    var n = [];
    for (var _i = 0; _i < arguments.length; _i++) {
      n[_i] = arguments[_i];
    }
    return n.reduce(function (a, b) {
      return a * b;
    });
  }
};

// ? 는 선택적으로 설정할 때 사용합니다. (ES6에서는 지원하지 않습니다)
var o = numbers_module;

// sumNumbers 속성이 없을 경우, sum 속성에 기본 값을 설정합니다.
var multiply = o.multiplyNumbers,
  _a = o.sumNumbers,
  sum = _a === void 0 ? function () {
    var n = [];
    for (var _i = 0; _i < arguments.length; _i++) {
      n[_i] = arguments[_i];
    }
    return n.reduce(function (a, b) {
      return a + b;
    });
  } : _a;
```

{% endcode %}

{% embed url="<https://slides.com/yamoo9/es6#/1>" %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://yamoo9.gitbook.io/typescript/ts-vs-es6/destructure.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.