オブジェクト - JavaScript | CoDeS（コーデス）

前回の記事でデータ型にはプリミティブ型とオブジェクトがあるというお話をさせていただきました。
今回はオブジェクトについて詳しく見ていこうと思います。

オブジェクトとは

オブジェクトとは値と関数をまとめたデータの入れ物のことです。
具体的には、キーと値 or 関数のペアを複数保持するデータ構造をオブジェクトと言います。

具体例で見ていきましょう。

let obj = {
  name: '太郎',
  greeting: function() { console.log('Hello'); }
}

上記の例ではobjという変数に、オブジェクトを代入しています。
{ ～ }で囲まれたものがオブジェクトです。
この{ ～ }の記法のことをオブジェクトリテラルと呼びます。

このオブジェクトにはnameとgreetingというキーが存在します。
オブジェクトではキーのことを特別にプロパティと呼ぶので覚えておきましょう。

プロパティは「プロパティ : 値」の形で値とペアになっています。
もし、プロパティと値のペアが複数ある場合はカンマ（,）で区切ります（’太郎’の直後にあるカンマがそれです）。

nameプロパティはコロン（:）のあとに「’太郎’」という値が記述されています。
これは、nameプロパティに対して’太郎’という値が紐づいていることを表しています。

greetingプロパティは同じくコロンのあとに「function() { ～ }」と記述されています。
これは後の記事で解説する関数というものをgreetingプロパティに紐づけている状態です。

オブジェクトに紐付けられている関数は特別にメソッドと呼ぶので、用語を覚えておきましょう。

値の取得、メソッドの呼び出し

オブジェクトに設定された値を取得する、またはメソッドを利用する場合には二通りの方法があります。

ドット記法
ブラケット記法

ドット記法

ドット記法では、オブジェクトとプロパティをドットでつなぐことでオブジェクトの値の取得やメソッドの実行ができます。

オブジェクト名.プロパティ名

// オブジェクトの作成
let obj = {
  name: '太郎',
  greeting: function() { console.log('Hello'); }
}

// nameの値を取得
console.log(obj.name);
> 太郎

// greetingの処理を実行
obj.greeting();
> Hello

メソッドの実行の場合は ( ) が必要ですので覚えておきましょう（「関数」の記事で詳しく説明します）。

値の変更は、オブジェクトのプロパティに別の値を代入すれば変更できます。

// nameの値を変更
obj.name = '花子';

console.log(obj.name);
> 花子

ブラケット記法

ブラケット記法では、オブジェクトの後ろに [ ] を続けて、その中に文字列でプロパティ名を記述します。

オブジェクト名['プロパティ名']

// オブジェクトの作成
let obj = {
  name: '太郎',
  greeting: function() { console.log('Hello'); }
}

// nameの値を取得
console.log(obj['name']);
> 太郎

// greetingの処理を実行
obj['greeting']();
> Hello

ドット記法の場合と同様、メソッドの実行の場合には ( ) が必要です。

値の変更は、ドット記法と同様に、プロパティを指定して別の値を代入するだけです。

// nameの値を変更
obj['name'] = '花子';

console.log(obj['name']);
> 花子

プロパティに設定できる値

オブジェクトのプロパティには全てのデータ型を設定することができます。

さらには、オブジェクトの中にさらにオブジェクトを紐づけることが可能です。
オブジェクトが入れ子になった状態を、オブジェクトのネストと呼びます（ネストは英語で「入れ子」の意味）。

let tarou = {
  name: '太郎',
  height: 170.5,
  age: 20n,
  isMale: true,
  child: null,
  job: {
    type: '会社員',
    company: '山田商事'
  }
}

上記のtarouオブジェクトのjobプロパティにはオブジェクトが紐付けられています。
これがオブジェクトのネストの例です。

ネストされたオブジェクトにはドット記法、ブラケット記法のどちらでもアクセスできます。
その場合はドットをつなげるか、ブラケットをつなげて記述します。

// jobオブジェクトのtypeを取得したい場合（ドット記法）
console.log(tarou.job.type);
> 会社員

// jobオブジェクトのcompanyを取得したい場合（ブラケット記法）
console.log(tarou['job']['company']);
> 山田商事

プロパティの追加・削除

既に作成済みのオブジェクトにプロパティを追加したり、逆にプロパティを削除したりすることができます。

プロパティの追加

プロパティを追加するには、新しいプロパティ名を指定して値を代入するだけです。

// オブジェクトの作成
let obj = {
  name: '太郎',
  greeting: function() { console.log('Hello'); }
}

// ageプロパティの追加（ドット記法）
obj.age = 18;

console.log(obj.age);
> 18

// sleepメソッドの追加（ブラケット記法）
obj['sleep'] = function() { console.log('Good Night'); };

obj['sleep']();
> Good Night

プロパティの削除

プロパティを削除するにはdelete演算子を使います。

delete オブジェクト.プロパティ;
 or
delete オブジェクト['プロパティ'];

// オブジェクトの作成
let obj = {
  name: '太郎',
  greeting: function() { console.log('Hello'); }
}

// nameプロパティはまだ存在する
console.log(obj.name);
> 太郎

// nameプロパティを削除
delete obj.name;

// nameプロパティの削除確認
console.log(obj.name);
> undefined

まとめ

今回はオブジェクトリテラルを使ったオブジェクトの生成、値の取得やプロパティの削除などを学びました。

次回は、配列について説明します。