[[JavaScript]]では[[オブジェクト (JavaScript)|オブジェクト]]はすべての基本になる重要なデータ構造です。[[オブジェクト (JavaScript)|オブジェクト]]と[[Object (JavaScript)|Object]]は意味合いも異なりますので、混同しないように理解していきましょう。
## Reference
- [オブジェクト · JavaScript Primer \#jsprimer](https://jsprimer.net/basic/object/)
## Lesson
[[オブジェクト (JavaScript)|オブジェクト]]は[[オブジェクトリテラル (JavaScript)|オブジェクトリテラル]]を使って作成します。
```js
const mimizou = {
id: 1,
name: "みみぞう",
"full-name": "みみぞう", // ハイフンがある場合はクォーテーションで囲む
};
console.log(mimizou)
// { id: 1, name: "みみぞう", "full-name": "みみぞう" }
```
[[プロパティ (JavaScript)|プロパティ]]にアクセスする方法は2通りです。
```js
// ドット記法
const name = mimizou.name;
// ブラケット記法 (ドット記法が使えない or 変数をキーに指定するとき)
const fullName = mimizou["full-name"];
```
[[プロパティ (JavaScript)|プロパティ]]のキーと値が等しい場合は、[[拡張オブジェクトリテラル (JavaScript)|拡張オブジェクトリテラル]]により値を省略できます。
```js
const name = "なまえ";
const obj = { name }; // { name: name } と等価
console.log(obj.name)
// "なまえ"
```
## Mission 1
#😁EASY
以下のコードを簡易化してください。
```js
const id = 180702
const name = "千葉"
const human = {
id: id,
name: name,
}
```
%%
解答例
[[拡張オブジェクトリテラル (JavaScript)|拡張オブジェクトリテラル]]を使って値を省略する。
```js
const id = 180702;
const name = "千葉";
const human = {
id,
name,
};
```
%%
## Mission 2
#🙂NORMAL
以下のテストコードが失敗する理由を説明してください。
```js
import { expect } from "jsr:@std/expect";
Deno.test("test", () => {
const obj1 = {};
const obj2 = {};
expect(obj1).toBe(obj2);
});
```
%%
解答例
[[オブジェクトリテラル (JavaScript)|オブジェクトリテラル]] `{}` は `Object` のインスタンスを生成する構文であるため、`obj1` と `obj2` に代入される[[オブジェクト (JavaScript)|オブジェクト]]は異なる参照になるから。
%%
> [!hint]- Hint 1
> `toBe` がOKとなる条件は [[📗TDQ-010 Denoのテスト#Lesson]] を見直してみましょう。
## Mission 3
#🙂NORMAL
以下のテストコードが失敗する理由を説明してください。
```js
import { expect } from "jsr:@std/expect";
Deno.test("test", () => {
const mimizou = { id: 1, name: "みみぞう" };
expect(() => {
mimizou.name = "タツヲ";
}).toThrow("Assignment to constant variable");
});
```
%%
解答例
[[const (JavaScript)|const]]宣言した変数は再代入不可なだけであり、変数の[[プロパティ (JavaScript)|プロパティ]]は変更できるから。
%%
> [!hint]- Hint 1
> [[📗TDQ-003 変数と宣言#Reference]]の中にヒントがあります。
---
*NEXT* >> [[📗TDQ-013 オブジェクトの分割代入]]