[[オブジェクト (JavaScript)|オブジェクト]]は非常に奥が深く、[[JavaScript]]の中核を担う重要な仕様です。実用的な使い方を1つずつ丁寧にマスターしていきましょう。
## Reference
- [オブジェクト · JavaScript Primer \#jsprimer](https://jsprimer.net/basic/object/)
## Lesson
実は[[オブジェクト (JavaScript)|オブジェクト]]の[[分割代入 (JavaScript)|分割代入]]には[[📗TDQ-006 分割代入#オブジェクト]]で一度触れています。繰り返しになりますが、[[オブジェクト (JavaScript)|オブジェクト]]の[[プロパティ (JavaScript)|プロパティ]]を分割して代入できる機能です。
```js
const { id, name } = { id: 1, name: "Ichiro" };
// id = 1
// name = "Ichiro"
```
別名を指定することもできます。
```js
const { id: myId, name: myName } = { id: 1, name: "Ichiro" };
// myId = 1
// myName = "Ichiro"
```
各変数ごとにデフォルト値も指定できます。
```js
const { id, name, favorite = "カレー" } = { id: 1, name: "タツヲ" };
// favorite = "カレー"
const { id, name, favorite = "カレー"} = { id: 2, name: "みみぞう", favorite: "こんにゃくゼリー" };
// favorite = "こんにゃくゼリー"
```
すべての変数を宣言する必要はありません。欲しいものだけを取得できます。
```js
const { id, name } = { id: 2, name: "みみぞう", favorite: "こんにゃくゼリー" };
// id = 2
// name = "みみぞう"
```
[[残余プロパティ (JavaScript)|残余プロパティ]]と組み合わせることで、特定[[プロパティ (JavaScript)|プロパティ]]を除外した[[オブジェクト (JavaScript)|オブジェクト]]の生成も可能です。
```js
const { favorite, ...core } = { id: 2, name: "みみぞう", favorite: "こんにゃくゼリー" };
// core = { id: 2, name: "みみぞう" }
```
## Mission 1
#😁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 2
#😁EASY
以下のコードを[[分割代入 (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 3
#🙂NORMAL
以下のコードは `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(args) {
const { id, name = "No name" } = args;
console.log(id, name);
}
```
または
```js
function hoge({ id, name = "No name" }) {
console.log(id, name);
}
```
%%
> [!hint]- Hint 1
> [[分割代入の既定値 (JavaScript)|分割代入の既定値]]を使います。
> [!hint]- Hint 2
> `??` は [[Null合体演算子 (JavaScript)|Null合体演算子]]ですが、意味を理解していなくても解答できます。
---
## Mission 4
#😵HARD
[[#Lesson]]で[[残余プロパティ (JavaScript)|残余プロパティ]]を説明するために提示した以下のコードには問題があります。
```js
// favoriteを除外したcoreを抽出
const { favorite, ...core } = { id: 2, name: "みみぞう", favorite: "こんにゃくゼリー" };
// coreを利用する
console.log(core);
```
その問題が何であるかを回答し、回避策を提示してください。
%%
解答例
除外するために宣言された `favorite` がその後利用されないため、[[deno lint]]で[no-unused-vars](https://docs.deno.com/lint/rules/no-unused-vars/)が発生してしまう。
```warn
• `favorite` is never used
If this is intentional, prefix it with an underscore like `_favorite` [no-unused-vars]
```
変数名をアンダースコアから開始することで回避できる。[[新しい変数名へ分割代入 (JavaScript)|新しい変数名へ分割代入]]することにより、最小限の記述で済む。
```js
const { favorite: _, ...core } = {
id: 2,
name: "みみぞう",
favorite: "こんにゃくゼリー",
};
console.log(core);
```
%%
> [!hint]- Hint 1
> [[deno lint]]が正しく設定されていれば、問題は自ずと浮き上がってきます。
> [!hint]- Hint 2
> [[deno lint]]が発するメッセージの中に回避策があります。[[新しい変数名へ分割代入 (JavaScript)|新しい変数名へ分割代入]]する構文を使えば... ([[#Lesson]]を要確認)
---
*NEXT* >> [[📗TDQ-014 オブジェクトの拡張と複製]]