[[分割代入 (JavaScript)|分割代入]]はコードの可読性を上げるために利用できる有用な式です。今後も出現頻度は高いので慣れておきましょう。
## Reference
- [演算子 · JavaScript Primer \#jsprimer](https://jsprimer.net/basic/operator/)
## Lesson
[[分割代入 (JavaScript)|分割代入]]は[[配列 (JavaScript)|配列]]や[[オブジェクト (JavaScript)|オブジェクト]]を分割して個々の変数に代入する式です。それぞれのケースについて例を紹介します。
### 配列
[[配列 (JavaScript)|配列]]の要素を分割して代入できます。
```js
const [x, y, z] = [10, 20, 30]
// x = 10
// y = 20
// z = 30
```
### オブジェクト
[[オブジェクト (JavaScript)|オブジェクト]]の[[プロパティ (JavaScript)|プロパティ]]を分割して代入できます。
```js
const { id, name } = { id: 1, name: "Ichiro" };
// id = 1
// name = "Ichiro"
```
## Mission 1
#😁EASY
以下のコードを[[分割代入 (JavaScript)|分割代入]]を使って書き直してください。
```js
const numbers = ["one", "two"]
const one = numbers[0]
const two = numbers[1]
```
%%
解答例
```js
const numbers = ["one", "two"];
const [one, two] = numbers;
```
%%
## Mission 2
#😁EASY
以下のコードを[[分割代入 (JavaScript)|分割代入]]を使って書き直してください。
```js
const props = { title: "タイトル", hidden: true };
const title = props.title;
const hidden = props.hidden;
```
%%
解答例
```js
const props = { title: "タイトル", hidden: true };
const {title, hidden} = props;
```
%%
## Mission 3
#🙂NORMAL
以下のコードを[[分割代入 (JavaScript)|分割代入]]を使って書き直してください。ただし、**変数 `tdqData` と `tdqError` の名前は変更しないでください**。
```js
const tdqResult = { data: [1, 2], error: null };
const tdqData = tdqResult.data;
const tdqError = tdqResult.error;
console.log(tdqData, tdqError);
```
%%
解答例
```js
const tdqResult = { data: [1, 2], error: null };
const { data: tdqData, error: tdqError } = tdqResult;
console.log(tdqData, tdqError);
```
%%
> [!hint]- Hint 1
> [[新しい変数名へ分割代入 (JavaScript)|新しい変数名へ分割代入]]してみましょう。
## Mission 4
#😵HARD
以下のコードは `id` `name` を[[プロパティ (JavaScript)|プロパティ]]にもつ[[オブジェクト (JavaScript)|オブジェクト]]を引数として受け取る関数 `hoge` の実装です。`name` が指定されなかった場合はデフォルト値として `"No name"` が利用されます。
```js
function hoge(args) {
const id = args.id;
const name = args.name ?? "No name";
console.log(id, name);
}
```
[[分割代入 (JavaScript)|分割代入]]を使ってこのコードをリファクタリングしてください。
%%
解答例
```js
function hoge({ id, name = "No name" }) {
console.log(id, name);
}
```
または
```js
function hoge(args) {
const { id, name = "No name" } = args;
console.log(id, name);
}
```
%%
> [!hint]- Hint 1
> [[分割代入の既定値 (JavaScript)|分割代入の既定値]]を使います。
> [!hint]- Hint 2
> `??` は [[Null合体演算子 (JavaScript)|Null合体演算子]]ですが、意味を理解していなくても解答できます。
---
*NEXT* >> [[📗TDQ-007 論理演算子とNull合体演算子]]