JavaScriptのオブジェクト（連想配列）を学ぶ！追加やキー取得などの方法。

この記事では、JavaScriptのオブジェクトの使い方について勉強していく。

オブジェクトは実践においてよく使用する。扱いやすく便利なので、積極的に使用しているプログラマも多いだろう。

オブジェクト（連想配列）とは？

配列とはひとつの変数であり、インデックスによって順序を着けられたデータの集まりである。

一方、連想配列は任意の文字列をキーとして使用できる配列のことを指す。

オブジェクトが持つ個々のデータはプロパティと呼ばれる。JavaScriptの連想配列では、関数をひとつのプロパティとして格納することができる。

オブジェクトの使い方

では、JavaScriptにおけるオブジェクトの使い方を見ていこう。

オブジェクトの宣言

まずはオブジェクトの宣言の方法から確認する。

JavaScriptでオブジェクトを宣言する場合は以下のように書く。

配列では角カッコを使用し宣言をあらわしたが、オブジェクト（連想配列）では以下のように波カッコを使用する。

const customer = {};

宣言は以下のように記述してもいい。

const customer = new Object();

宣言と同時に値を代入する場合は次のような具合に記述する。

const customer = {name: 'Shibuya Taro', tel: '012-3456-7891'};

キーからプロパティを取得する

オブジェクトに格納されている値をキーから呼び出すには、以下のようにピリオドを使う方法と角カッコを使う方法がある。

const customer = {name: 'Shibuya Taro', tel: '012-3456-7891'};
console.log(customer.name);
console.log(customer['name']);

プロパティ名が数値型である場合、ピリオドを使った記述方法ではエラーが発生する。

const customer = {name: 'Shibuya Taro', 123: 'random-text'};
console.log(customer.123);
console.log(customer['123']);

プロパティを追加する

オブジェクトに新しいプロパティを追加する際には以下のように記述する。

const customer = {name: 'Shibuya Taro', tel: '012-3456-7891'};
customer['gender'] = 'man';

オブジェクトのプロパティを上書きする際も同じ構文を使用する。

customer['tel'] = '9876-5432-1010';

プロパティを削除する

オブジェクトから特定のプロパティを削除する場合はdelete命令を使用する。

const customer = {name: 'Shibuya Taro', tel: '012-3456-7891'};
delete customer['tel'];

プロパティが存在しない場合はTRUEが返される。

オブジェクトをループする

オブジェクトをループする（すべてのプロパティを書き出す）にはいくつかの方法があるが下の例にようにfor in構文を使用することが多い。

const customer = {name: 'Shibuya Taro', tel: '012-3456-7891', gender: 'man'};

for(const c in customer) {
	console.log(`${c}: ${customer[c]}`);
}

Objectクラスのentriesを使用することもできる。

const customer = {name: 'Shibuya Taro', tel: '012-3456-7891', gender: 'man'};

for (const [key, value] of Object.entries(customer)) {
  console.log(`${key}: ${value}`);
}