JavaScriptのオブジェクトリテラルの簡易構文を学ぶ

はじめに

JavaScriptのオブジェクトリテラルには、記述を簡潔にしたり、柔軟にプロパティを定義したりするための構文があります。
この記事では、次の3つを紹介します。

• 簡易プロパティ構文
• 簡易メソッド構文
• 算出プロパティ名

簡易プロパティ構文

以下のようなオブジェクトリテラルを定義したとします。

const user = {
    name: name,
    age: age
};

console.log(user);
// { name: '田中', age: 25 }

プロパティ名と変数名が同じ場合は、name: nameをnameと省略することができます。

const name = '田中';
const age = 25;

const user = { name, age };

プロパティ名と変数名が異なる場合は、省略できませんので注意してください。

const userName = '田中';
const userAge = 25;

const user = {
    name: userName,
    age: userAge
};

console.log(user);
// { name: '田中', age: 25 }

簡易メソッド構文

オブジェクトのメソッドは、functionと:を書かずに定義できます。

const user = {
    name: '田中',
    greet() {
        return `こんにちは、${this.name}さん`;
    }
};

console.log(user.greet());
// こんにちは、田中さん

簡易メソッド構文を使わずに書くと、次のようになります。

const user = {
    name: '田中',
    greet: function () {
        return `こんにちは、${this.name}さん`;
    }
};

console.log(user.greet());
// こんにちは、田中さん

算出プロパティ名

[]で式を囲むと、その評価結果をプロパティ名に使えます。

const prefix = 'user';
const methodName = 'printUserInfo';

const user = {
    // 式の評価結果をプロパティ名にする。
    [prefix + 'Id']: '0001',
    [prefix + 'Name']: '田中',
    // メソッド名にも算出プロパティ名を使える。
    [methodName]() {
        console.log(this.userId);
        console.log(this.userName);
    }
};

user.printUserInfo();
// 0001
// 田中

まとめ

• プロパティ名と変数名が同じ場合、{ name: name }を{ name }と省略できる
• オブジェクトのメソッドを、greet() {}のように簡潔に定義できる
• []で式を囲むと、その評価結果をプロパティ名として利用できる

参考

• 山田祥寛（2025）『改訂新版 これから始めるReact実践入門』SBクリエイティブ、pp.33–34
• MDN Web Docs - Object initializer
• MDN Web Docs - Method definitions