inazuma code :オブジェクト
オブジェクト は、キーと値のペアで構成されるデータ構造です。
キーには文字列や数値、さらには式を使った動的な指定もできます。
プロパティの追加・更新・削除に対応しており、ネスト構造や配列との組み合わせも柔軟に扱えます。
オブジェクトリテラル
波括弧 { }
を使って記述します。
{} // 空のオブジェクト
{
name: "Alice",
age: 30
}
キーの種類:
- 識別子(
name
) - 文字列キー(
"100 円"
) - 数値キー(
0: "zero"
) - 式キー(
["prefix" + "Key"]: "value"
)
let key = "age";
{ [key]: 25 } // { age: 25 }
省略記法:
キーと変数名が同じ場合、値を省略して書けます。
let name = "Alice";
let age = 30;
{ name, age } // { name: "Alice", age: 30 }
ネスト
オブジェクトは入れ子にできます。
{
user: {
id: 1,
name: "Charlie"
},
items: [1, 2, 3]
}
プロパティアクセス
オブジェクトのプロパティにはドット演算子(.
)でアクセスします。
user.name // "Alice"
x.user.name // ネストしたプロパティのアクセス
存在しないプロパティは null
を返します。
let x = { name: "Alice" };
x.age // null
オプショナルチェイニング
存在しない可能性のあるプロパティに安全にアクセスできます。
user?.name // user が null なら null を返す
x.user?.name // user が null なら null
プロパティの更新・追加
let
で宣言された変数でも、オブジェクトの中身は変更できます(束縛自体は不変ですが内部は可変)。
let obj = { name: "Alice" };
obj.name = "Bob"; // 更新
obj.age = 30; // 新規追加
let data = { user: { name: "Alice" } };
data.user.name = "Charlie"; // 深い階層の更新
スプレッド構文(...
)
...
を使うと、オブジェクトの中に別のオブジェクトのプロパティを展開できます。
let a = { x: 1, y: 2 };
{ ...a, z: 3 };
// { x: 1, y: 2, z: 3 }
let b = {};
{ a: 10, ...b, c: 20 };
// { a: 10, c: 20 }
// 複数のオブジェクトを結合
let x = { foo: 'bar' };
let y = { baz: 42 };
{ ...x, ...y, qux: true };
// { foo: 'bar', baz: 42, qux: true }
スプレッドの対象には式も使えます。
let obj = { ...(1 > 0 ? { a: 100, b: 200 } : { c: 300 }) };
// { a: 100, b: 200 }
ヒント
同じキーが複数のスプレッドやリテラルで定義された場合、後から展開したものが優先され、前の値を上書きします。
{ a: 1, ...{ a: 2, b: 3 } };
// { a: 2, b: 3 }
分割代入
分割代入を使うと、オブジェクトのプロパティを変数として取り出せます。
let { a, b } = { a: 1, b: 2 };
// a = 1, b = 2
// 順不同も可
let { b, a } = { a: 1, b: 2 };
// 残余プロパティ
let { a, ...rest } = { a: 1, b: 2, c: 3 };
// rest = { b: 2, c: 3 }
// 未定義プロパティは null
let { x, y } = { x: 5 };
// y = null
まとめ
- キーは識別子、文字列、数値、式が使用できます。
- キーと変数名が同じ場合は省略記法が使えます。
- 存在しないキーアクセスは
null
を返します。 ?.
で安全にアクセスできます。let
宣言のオブジェクトでも中身は変更できます。- スプレッド、残余要素、分割代入、末尾カンマに対応しています。