JavaScript徹底ガイド｜オブジェクトの基礎について学ぶ

JavaScriptで扱うことのできるデータ型は、プリミティブ型（基本型）とオブジェクト型の２つに分類されます。
この記事では、データ型のタイプの１つ『オブジェクト』について学びます。

ワラ

オブジェクトはJavaScriptで最も重要なデータ型だよ！JavaScript言語をマスターする上での重要な土台となるのでしっかり理解しよう！

オブジェクトとは

オブジェクトは、名前と値の組の集まりです。オブジェクトは複数のデータを集めた複合のデータであり、『連想配列』『辞書』などとも呼ばれます。

例）

名前	値
suit	ハート
rank	A

MEMO

オブジェクトの一つ一つのデータ（名前と値の組）はオブジェクトのプロパティと呼ばれます。suitやrankなどのプロパティの名前の部分を、プロパティ名もしくはキーといいます。

JavaScriptでオブジェクトを生成するには、オブジェクトリテラルを使う方法とコンストラクタと呼ばれる関数を使う方法があり、ここではオブジェクトリテラルによるオブジェクトの生成法について解説していきます。

例はトランプのカードの情報をオブジェクトリテラルで表したもの。

JavaScript

var card = { suit: "ハート", rank: "A" };

{}の部分がオブジェクトリテラルで、これを変数cardに代入しています。プロパティはプロパティ名と値をコロン（:）で区切って記述し、{}の中にプロパティをカンマ（;）で区切って並べます。

MEMO

プロパティ名には任意の識別子もしくは任意の文字リテラル（空文字）を使うことができます。

ワラ

『識別子』ってなんだっけ？って思った方は前の記事を確認しておさらいしておこう！

変数に代入されたオブジェクトのプロパティの値にアクセスするには、ピリオド演算子（.）、もしくはカギ括弧演算子（[]）を用います。

JavaScript

card.suit // → ハート
card["rank"] // → A

ピリオド（.）でアクセスするときは、プロパティの名前である識別子のみが指定できます。
カギ括弧（[]）でアクセスするときには、プロパティの名前である文字列に評価される式が指定できます。

存在しないプロパティ名のプロパティに値を代入すると、新規のプロパティが追加されます。

JavaScript

card.value = 14;
console.log(card); // → object {suit: "ハート", rank: "A", value: 14}

delete演算子でプロパティを削除できます。

JavaScript

delete card.rank;
console.log(card); // → object {suit: "ハート", value: 14}

in演算子を使うと、オブジェクトに特定のプロパティが存在するかどうかを確かめることができます。

プロパティ名を表す文字列 in オブジェクト名

プロパティがオブジェクトに含まれるときはtrue、含まれないときはfalseとなります。

JavaScript

var card = { suit: "ハート", rank: "A" };
console.log("suit" in card) // → true
console.log("color" in card) // → false

プロパティの値が関数型であるとき、そのプロパティはメソッドと呼ばれます。

ワラ

メソッドについての詳しい解説は次の記事で行うよ！（とっても重要だから一つの記事として掲載しておきたいんだ）

オブジェクトはメモリ上のひとかたまりの領域として生成されます。オブジェクトを変数に代入すると、オブジェクトへの参照（メモリ上の場所情報）がその変数に格納されます。
変数に格納されたオブジェクトへの参照は、プリミティブ値と同じように他の変数に代入することができます。

JavaScript

var card = { suit: "ハート", rank: "A" };
ver a = card;

こうすると、変数aもそのオブジェクトを参照することになり、aによってオブジェクトの読み書きができるようになります。

JavaScript

console.log(a.suit); // → ハート
a.suit = "スペード";
console.log(a.suit); // → スペード
console.log(card.suit); // → スペード