オブジェクト リテラルは JavaScript の基本的な部分であり、オブジェクトを迅速に作成および初期化できるようにします。 ES6 以降では、JavaScript でオブジェクト リテラルにいくつかの機能拡張が導入され、オブジェクト リテラルがさらに強力かつ簡潔になりました。これらの改善点を詳しく見て、コードをよりクリーンかつ効率的にする方法を見てみましょう。

1. 短縮プロパティ名

オブジェクトを作成するときに、プロパティ名がそれに割り当てる変数名と同じである場合は、短縮構文を使用できます。

const name = 'John';
const age = 30;

// Old way
const person = {
    name: name,
    age: age
};

// New way
const person = { name, age };

console.log(person); // { name: 'John', age: 30 }

この短縮構文により、繰り返しが減り、コードがより簡潔になります。
MDN ドキュメント: オブジェクト初期化子

2. 短縮メソッド名

同様に、オブジェクト内でメソッドを定義する場合、関数キーワードとコロンを省略できます。

// Old way
const calculator = {
    add: function(a, b) {
        return a   b;
    }
};

// New way
const calculator = {
    add(a, b) {
        return a   b;
    }
};

console.log(calculator.add(5, 3)); // 8

この構文は、特にオブジェクト内に複数のメソッドがある場合に、すっきりしていて読みやすくなっています。
MDN ドキュメント: メソッド定義

3. 計算されたプロパティ名

ES6 では、式を使用してプロパティ名を計算できます。これは、動的なプロパティ名を作成する場合に特に便利です。

const prefix = 'user_';
const id = 1234;

const user = {
    [`${prefix}${id}`]: 'John Doe'
};

console.log(user.user_1234); // 'John Doe'

この機能は、ロジックまたは外部データに基づいて動的なキーを持つオブジェクトを作成する必要がある場合に強力です。
MDN ドキュメント: 計算されたプロパティ名

4. メソッドのプロパティ

ES6 では、get キーワードと set キーワードを使用してオブジェクト リテラルでメソッドを定義する新しい方法が導入されました。これにより、関数を明示的に呼び出さずに計算プロパティを作成できます。

const person = {
    firstName: 'John',
    lastName: 'Doe',
    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    },
    set fullName(name) {
        [this.firstName, this.lastName] = name.split(' ');
    }
};

console.log(person.fullName); // 'John Doe'
person.fullName = 'Jane Smith';
console.log(person.firstName); // 'Jane'
console.log(person.lastName); // 'Smith'

ゲッターとセッターは、計算されたプロパティを定義するクリーンな方法を提供し、値を取得または設定するときに検証や副作用を追加するために使用できます。
MDN ドキュメント: Getter と Setter

5. オブジェクトスプレッド演算子

厳密にはオブジェクト リテラル拡張の一部ではありませんが、スプレッド演算子 (...) はオブジェクト リテラルとうまく連携する強力な機能です。これにより、オブジェクトのクローンを簡単に作成したり、複数のオブジェクトを結合したりできます。

const defaults = {
    theme: 'light',
    fontSize: 14
};

const userPreferences = {
    fontSize: 16
};

const settings = {
    ...defaults,
    ...userPreferences
};

console.log(settings); // { theme: 'light', fontSize: 16 }

スプレッド演算子を使用すると、既存のオブジェクトに基づいて新しいオブジェクトを簡単に作成できます。これは、アプリケーション内で不変性を維持するのに特に役立ちます。
MDN ドキュメント: スプレッド構文 (...)

結論

JavaScript のこれらのオブジェクト リテラルの機能強化により、開発者はオブジェクトを操作するためのより表現力豊かで簡潔な方法が提供されます。これらの機能を活用すると、よりクリーンで読みやすく、保守が容易なコードを作成できます。

これらの機能は強力ですが、慎重に使用することが重要であることに注意してください。簡潔さよりもコードの読みやすさと保守性を常に優先してください。

ブラウザの互換性

これらの機能のブラウザ サポートの概要を次に示します:

実際の使用例

1. 短縮プロパティ: 特に React コンポーネントのプロパティで、既存の変数からオブジェクトを作成するのに最適です。
2. 短縮メソッド: クラスのような構造で、または複数の関連関数を定義する場合に便利です。
3. 計算されたプロパティ名: 国際化 (i18n) オブジェクトで動的キーを作成するのに最適です。
4. Getter/Setter メソッド: 組み込みの検証や副作用を備えた「スマート」プロパティの作成に最適です。
5. オブジェクト スプレッド: Redux での状態管理や、わずかな変更を加えて新しいオブジェクトを作成するのに最適です。

パフォーマンスに関する考慮事項

これらの機能強化は通常、パフォーマンスに重大な影響を与えませんが、多くのプロパティをマージする場合、オブジェクト スプレッド演算子は Object.assign() よりも効率が悪い可能性があります。ほとんどの使用例では、読みやすさの利点がパフォーマンスのわずかな違いを上回ります。

関連機能

最新の JavaScript オブジェクト操作についての理解を深めるために、以下を検討してみてください。

• 代入を分割しています
• Object.assign() メソッド
• Object.entries()、Object.values()、および Object.keys() メソッド
• オブジェクトの不変性を実現する Object.freeze() メソッドと Object.seal() メソッド

これらのオブジェクト リテラルの拡張機能と関連機能をマスターすることで、よりエレガントで効率的な JavaScript コードを作成できるようになります。

この記事が役立つと思われる場合は、フォロー ボタンをクリックして、JavaScript、Reactjs、Next.js に関する最新情報や役立つリソースを入手してください。また、Twitter @OgDev-01 で私をフォローして、役立つリソースや技術トレンドを入手したり、OpenSauced で私がどのような貢献をしてきたのか、特に強調したものを確認したりすることもできます。