【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); // {color: "red", shape: "circle", size: 50}
console.log(obj.color); // "red"
console.log(obj.shape); // "circle"
console.log(obj.size); // 50

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

配列（Array）

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

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

console.log(array[0]); // "red"
console.log(array[3]); // undefined
console.log(array.length); // 3

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

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

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

関数（Function）

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

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

greeting(); // "hello"

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

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

日時（Date）

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

const now = new Date(); 

console.log(now.getFullYear()); // 2021
console.log(now.getMonth()); // 4
console.log(now.getHours()); // 22
console.log(now.getMinutes()); // 49

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

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