【JavaScript】オブジェクトとは？プロパティを追加する方法

JavaScriptには文字列型や数字型、Boolean型など様々な型がありますが、中でもオブジェクトはJavaScriptにおいて最も重要な型と言っても過言ではありません。

この記事では、JavaScript言語におけるオブジェクトとはどんな型？、そして、オブジェクトの作成や参照方法について解説します。

JavaScript初心者の方は、是非、最初のうちに理解しておきましょう。

JavaScriptにおけるオブジェクトとは？

オブジェクトとは？

JavaScriptにおけるオブジェクトとは、まとまったデータのかたまりを表す型になります。

具体的にみていきましょう。

const milk = {
    product: 'smile milk',
    size: 500,
    bestBefore: 20221010,
};

【ソースの解説】
1行目で、milkという名前の定数でオブジェクトを作成しています。
2行目で、製品名（product）として、’smile milk’ を指定しています。
3行目で、サイズ（size）は、500mlを指定しています。
4行目で、賞味期限（bestBefore）は、20221010と指定しています。

オブジェクトの書き方

JavaScriptのオブジェクトは、キー（key）とバリュー（value）のセットで構成されます。

キーとバリューをセットで、プロパティと呼びます。

例えば、さきほど例の2行目のproductプロパティのプロパティ名はproductで、

productプロパティの値が、’smile milk’と言ったりします。

オブジェクトのプロパティには文字列・数値・論理値・配列・関数など様々な値を設定することが可能です。
さらにオブジェクトの中にオブジェクトを入れることもできます。

const milk = {
    product: 'smile milk',
    size: 500,
    bestBefore: 20221010,
};

オブジェクトの中にオブジェクトを定義することも可能

オブジェクトの中にオブジェクトをさらに含めて定義することも可能です。

const milk = {
    product: 'smiley milk',
    size: 500,
    bestBefore: 20221010,
    producer:{
      name: 'Kita Taka'
      address: '北海道',
    },
};

milkオブジェクトの中に、生産者（producer）オブジェクトをさらに定義しています。

オブジェクトにアクセスする方法

JavaScriptでは、オブジェクトを作成し、オブジェクトにアクセスしながらさまざまな操作・処理を行います。
プロパティにアクセスする方法についても学んでおきましょう。

const milk = {
    product: 'smiley milk',
    size: 500,
    bestBefore: 20221010,
    producer:{
      name: 'Kita Taka'
      address: '北海道',
    },
};

今回作成した例の場合は、milk.product と書くことで、productプロパティにアクセスすることができます。

さらに値を変更したい場合は・・・

milk.product = ‘smiley milk’;

と書くことで、productプロパティの値を ‘smile milk’ から ‘smiley milk’ に変更することができます。

オブジェクトの中にあるオブジェクトにアクセスするには・・・？

オブジェクトの中にオブジェクトを作成した場合、ドット「.」でつなぐことで、さらに下位階層にもアクセスすることが可能です。

「milk.producer.name」にアクセスすると ‘Kita Taka’ が返ってきます。
「milk.producer.address」にアクセスすると ‘北海道’ が返ってきます。

オブジェクトにプロパティを追加する方法

JavaScriptオブジェクトにプロパティを追加する場合は、下記のように記述します。

プロパティを追加する書き方

オブジェクト.キー = バリュー;

では、milkオブジェクトに温度プロパティを追加してみましょう。

milk.temperature = ‘cold’ ;

では実行結果をコンソール画面で確認してみましょう。

4つ目のtemperature プロパティが追加されていますね。

オブジェクトにプロパティを削除する方法

JavaScriptオブジェクトにプロパティを削除する場合は、下記のように記述します。

プロパティを削除する書き方

delete オブジェクト.キー;

では、milkオブジェクトにサイズ（size）プロパティを追加してみましょう。

delete milk.size;

では実行結果をコンソール画面で確認してみましょう。

2つ目のsizeプロパティが削除されていますね。

まとめ

今回は、JavaScriptのオブジェクトについて解説しました。

大きくポイントは、以下の６つです。

①JavaScriptのオブジェクトは、プロパティで管理されたデータのかたまりである。
②プロパティは、キーとバリューで構成される。
③キーとバリューをセットで、プロパティと呼ぶ。
④作成した[オブジェクト.プロパティ名]でアクセスすることが可能。
⑤オブジェクト.キー = バリュー;でオブジェクトにプロパティを追加。
⑥delete オブジェクト.キー;でオブジェクトからプロパティを削除。

まずは、これらの基本を最初におさえておきましょう。

最後までお読みいただきありがとうございました。

あわせて読みたい

JavaScriptの変数名の付け方｜命名規則ルール JavaScriptを学習している初学者向けに変数名の付け方やルールについて解説します。 各プログラム言語には慣例的なお作法として、変数名の命名規則といったルールが存在…