【JavaScriptの基本】プリミティブではないデータ型とは？オブジェクト型の性質について解説

JavaScriptのデータ型には、「プリミティブ型」と「オブジェクト型」が存在します。
この2つのデータ型の概念を理解することは、JavaScriptを扱ううえでとても重要です。前回は、不変のデータ型であるプリミティブ型について取り上げましたが、今回は、反対に可変のデータ型であるオブジェクト型について解説します。

この記事を通してオブジェクト型の特徴を理解していきましょう。プリミティブ型について理解したいという方は、以下の記事も参考にしてください。

2021.05.16

【JavaScriptの基本】データの型とは？JavaScriptにおける不変のプリミティブ型について解説

あらゆるプログラミング言語には、それぞれの言語によって異なったデータ構造が存在します。コードを書くうえで、それらのデータの構造を理解することは必要不可欠です。当記事では、JavaScriptで扱うデータ...

オブジェクト型

プリミティブ型が不変であるのとは異なり、オブジェクト型は可変です。
オブジェクト型は、複数の変数やプリミティブ型の値などの集合からなるもので、値自体を後から変更することができます。つまり、カスタマイズすることが可能なデータ型ということです。

プリミティブ型以外のデータは、すべてオブジェクト型に該当するため、さまざまな種類が存在します。

オブジェクト（Object）
配列（Array）
関数（Function）
日時（Date）
正規表現（RegExp）
マップ（Map）とウィークマップ（Weak Map）
セット（Set）とウィークセット（Weak Set）など

この中でもオブジェクト型の基本である「オブジェクト」「配列」「関数」「日時」の性質について解説していきます。

オブジェクト（Object）

オブジェクトは、入れ物である箱と、箱の中に入っている中身で成り立っています。
箱の中にどんなものが入っているのか分かるように、入れ物には名前をつけて、必要なときに取り出していきます。

オブジェクトの役割がなんとなく想像できたところで、どのようにオブジェクト作り、扱っていくのかみていきましょう。

箱の中に入っている中身すなわち内容物のことを「プロパティ（property）」と呼びます。また、プロパティは、名前（key）と値（value）で構成されています。

サンプルコードをみてみましょう。

const obj = {
  color: 'red',
  shape: 'circle',
  size: 50,
};

console.log(obj);
console.log(obj.color);
console.log(obj.shape);
console.log(obj.size);

出力結果

{color: ‘red’, shape: ‘circle’, size: 50}
‘red’
‘circle’
50

Javascript object

オブジェクトの中身全体を参照する場合はオブジェクト名を指定します。プロパティにアクセスする場合は、「ドット演算子と呼ばれるドット（.）」をオブジェクト名とプロパティ名の間に記述します。

また、ブラケット記述法でもプロパティにアクセスすることが可能です。

const obj = {
  color: 'red',
  shape: 'circle',
  size: 50,
};

console.log(obj['color']);
console.log(obj['shape']);
console.log(obj['size']);

Javascript object

このようにオブジェクト名のうしろにプロパティ名を大括弧[]で囲んで記述すると、プロパティにアクセスすることができます。

オブジェクトは奥が深いため、この他にもさまざまな操作方法がありますが、まずはオブジェクトの基本の型として上記の型を覚えておくと良いでしょう。

配列（Array）

配列は、オブジェクトと同様に複数のデータを取りまとめて、一度に処理を行うために使用されます。配列に格納されている要素は順番が決まっており、０から始まる一連の整数であることがオブジェクトと異なる点です。配列の要素を大括弧[]で囲みます。

const array = ['red', 'green', 'yellow'];

console.log(array[0]);
console.log(array[3]);
console.log(array.length);

出力結果

‘red’
Undefined
3

Javascript object

0から始まるインデックス番号を大括弧[]内に記述して配列の要素を取り出します。
このインデックス番号は、格納された順番で割り振られるため、「array[0]」と指定すると、一番はじめに格納されている「’red’」を取り出すことができます。

上記の配列は、要素が3つ格納されているため、一番さいごに格納されている要素のインデックス番号は「2」です。そのため、「array[3]」と指定しても、存在しない値だと判別され、「undefined」が返ります。

また、「.length」を使用して配列内にいくつ要素があるのか調べることも可能です。
上記の場合、3つの要素が格納されているため、「3」と返るのが確認できます。

関数（Function）

関数は、再利用のできるコードの集合体です。関数はプログラミングで必ずと言って良いほど使われています。

function greeting () {
  console.log('hello');
}

greeting();

出力結果

‘hello’

Javascript object

ブロック{}の中に、処理を書いておき、「greeting();」という関数名を呼び出すだけで関数内の処理が実行されます。このような構文を用いて関数を定義することを「関数宣言（function文）」と言います。

また以下のように関数を定義することも可能です。

const greeting = function() {
  console.log('hello');
}

greeting();

Javascript object

無名の関数を変数に代入する方法です。この関数のことを「無名関数」または「匿名関数」と呼びます。「greeting」という変数名を呼び出すことで、関数内の処理が実行されます。

関数にはこの他にも複数の記述方法が存在しますが、ここでは関数の型の基本として、上記の記述方法を取り上げています。

日時（Date）

名前の通りですが、主に日付や時間を操作するために、日時の型（Dateオブジェクト）が使用されます。

const now = new Date();

console.log(now.getFullYear());
console.log(now.getMonth());
console.log(now.getHours());
console.log(now.getMinutes());

出力結果

Javascript object

「new Date();」と記述することで現在時刻を取得することができ、これを変数「now」へ代入します。つぎに、メソッドを使用して「年」「月」「時」「分」をそれぞれに分けて取得しています。
ここで言うメソッドとは、「getFullYear()」「getMonth()」「getHours()」「getMinutes()」のことです。

このように日付データを取得して、任意のフォーマットに変更することができます。