JavaScript

オブジェクトと分割代入

JavaScript

オブジェクト操作、スプレッド、分割代入

オブジェクトの基本

作成、アクセス、プロパティ操作

objects.js javascript
// オブジェクトリテラル
const user = {
    name: 'Alice',
    age: 30,
    'job title': 'Engineer', // スペースを含むキー

    // メソッド短縮記法
    greet() { return `Hi, I'm ${this.name}`; },

    // 計算プロパティ
    ['key_' + 1]: 'value1',
};

// アクセス
user.name;           // 'Alice'
user['job title'];   // 'Engineer'
user?.address?.city; // Optional chaining — undefined(例外なし)

// プロパティの追加・削除
user.email = 'alice@example.com';
delete user.age;

// プロパティの確認
'name' in user;             // true
user.hasOwnProperty('name'); // true(継承を除外)
Object.hasOwn(user, 'name'); // true(ES2022 推奨)

// プロパティの列挙
Object.keys(user);    // キーの配列
Object.values(user);  // 値の配列
Object.entries(user); // [key, value] の配列

分割代入

オブジェクト・配列の分割代入

destructuring.js javascript
// オブジェクト分割代入
const { name, age } = user;

// リネーム
const { name: userName, age: userAge } = user;

// デフォルト値
const { name = 'Guest', role = 'user' } = user;

// ネスト
const { address: { city, zip } } = user;

// 残余プロパティ
const { name, ...rest } = user; // rest にname以外が入る

// 配列分割代入
const [a, b, c] = [1, 2, 3];
const [first, , third] = [1, 2, 3]; // 要素をスキップ
const [head, ...tail] = [1, 2, 3, 4]; // head=1, tail=[2,3,4]

// 関数引数での分割代入
function display({ name, age = 0, role = 'user' } = {}) {
    console.log(`${name}, ${age}, ${role}`);
}

// スワップ
let x = 1, y = 2;
[x, y] = [y, x]; // x=2, y=1

スプレッド演算子と残余引数

...演算子のパターン集

spread.js javascript
// オブジェクトのコピーとマージ
const copy = { ...original };
const merged = { ...defaults, ...override }; // 後勝ち
const updated = { ...user, age: 31 };        // プロパティ更新

// 配列のコピーとマージ
const arrCopy = [...arr];
const combined = [...arr1, ...arr2];
const withItem = [...arr, newItem];  // 末尾追加(非破壊)
const prepended = [newItem, ...arr]; // 先頭追加(非破壊)

// 関数呼び出しへの展開
Math.max(...[1, 5, 3]); // 5
console.log(...messages);

// 注意: スプレッドはシャローコピー
const shallow = { ...obj };
// obj.nested と shallow.nested は同じ参照

// ディープコピー
const deep = structuredClone(obj);  // ES2022 推奨
const deep = JSON.parse(JSON.stringify(obj)); // 関数・Date・正規表現は非対応

Object の静的メソッド

Object.assign、freeze、fromEntries など

object-methods.js javascript
// Object.assign: ターゲットにプロパティをコピー
const target = Object.assign({}, source1, source2);

// Object.freeze: 変更不可(シャロー)
const config = Object.freeze({ host: 'localhost', port: 3000 });
// config.port = 8080; // silently fails(strict modeではエラー)

// Object.fromEntries: entries配列からオブジェクト生成
const entries = [['a', 1], ['b', 2]];
const obj = Object.fromEntries(entries); // { a: 1, b: 2 }

// Map を Object に変換
const fromMap = Object.fromEntries(myMap);

// クエリ文字列をオブジェクトに
const params = Object.fromEntries(new URLSearchParams('a=1&b=2'));
// { a: '1', b: '2' }

// Object.create: プロトタイプを指定してオブジェクト生成
const proto = { greet() { return `Hi, ${this.name}`; } };
const alice = Object.create(proto);
alice.name = 'Alice';
alice.greet(); // 'Hi, Alice'

// Object.defineProperty: 詳細なプロパティ定義
Object.defineProperty(obj, 'readOnly', {
    value: 42,
    writable: false,
    enumerable: true,
    configurable: false,
});