JavaScriptには、「オブジェクト(object)」というプロパティの集合体があります。

以前の記事では、データ型の一つとしてオブジェクトの基本を取り上げ、オブジェクトを「入れ物=箱」のようなものと表現しました。

JavaScriptは、オブジェクトを扱っていく機会がたくさんあるため、今回はオブジェクトの操作方法に焦点を当てて解説します。

オブジェクトの概要を知りたい方は、以下の記事を参考にしてください。

オブジェクトとは

「オブジェクト(Object)」とは、プロパティの集合体のことを指します。
「プロパティ(property)」とは、「名前(key)」と「値(value)」で構成されている箱の中身のことです。プロパティの名前のことを、「キー(key)」と表現することもあります。

オブジェクトは、時間や処理の進行に伴って変化が起こります。

オブジェクトの作成とプロパティへのアクセス

オブジェクトを作成するためには、オブジェクトリテラル「{}」の中に、プロパティ名と値を記述します。

const obj = {
key: 'value'
};

プロパティへアクセスするには、ドット記法「.」または、ブラケット記法「[]」を使います。

const obj = {
  key: 'value'
};

console.log(obj.key); //ドット記法
console.log(obj['key']); //ブラケット記法

では、実際にプロパティにアクセスし、値を参照してみましょう。

const obj = {
  name: 'Lisa',
  age: 25,
};

console.log(obj.name);  //'Lisa'
console.log(obj['age']);  //25

ドット記法とブラケット記法、それぞれでプロパティ名を指定すると、その名前を持った値を参照することができます。

プロパティ名と値の取り出し

オブジェクトのプロパティ名や値の一覧を配列として取り出すには、「Object.keys(obj)」や「Object.values(obj)」を使います。また、「Object.entries(obj)」を使うと、プロパティ名と値のペアの配列が返ります。

-プロパティ名の一覧を取得

const obj = {
  name: 'Lisa',
  age: 25,
  nationality: 'Canada'
};

console.log(Object.keys(obj));  //['name', 'age', 'nationality']

-値の一覧を取得

const obj = {
  name: 'Lisa',
  age: 25,
  nationality: 'Canada'
};

console.log(Object.values(obj));  //['Lisa', 25, 'Canada']

-プロパティ名と値の一覧を取得

const obj = {
  name: 'Lisa',
  age: 25,
  nationality: 'Canada'
};

console.log(Object.entries(obj));  
//[['name', 'Lisa'], ['age', 25], ['nationality', 'Canada']]

このように、オブジェクトが所有しているプロパティ名と値からなる配列が返ってきます。

オブジェクトでデータを保管する機会は多くありますが、要素の操作に関しては、配列の方が扱いやすい場合があります。

その際に、上記のオブジェクトから配列に変換する方法が役に立ちます。配列の要素をループさせるforEachやmapメソッドを使用できることがメリットとなるためです。

オブジェクトの初期化

オブジェクトを初期化するには、「new Object()」やオブジェクトリテラルを使用します。

const obj = new Object(); //new演算子
const obj = {}; //オブジェクトリテラル

空のオブジェクトを作成し、オブジェクトの初期化を行います。そのあとに、新たなオブジェクトを作成していきます。

オブジェクトのインスタンス化

「インスタンス化」とは、新たにオブジェクトを作成することです。言い換えると、オリジナルのオブジェクトを複製するイメージです。また、生成されたオブジェクトは「インスタンス」と呼ばれます。

以下のように、「new」演算子とコンストラクタを使うことで、インスタンスを作ることができます。

//コンストラクタの定義
function Character (name, age, nationality) {
  this.name = name;
  this.age = age;
  this.nationality = nationality;
}

//コンストラクタからインスタンスの生成
const character = new Character(
  'John',
  30,
  'Australia'
);

console.log(character.name);  //'john'
console.log(character.age); //30
console.log(character.nationality); //'Australia'

実行結果
JavaScript object

この場合、「character」は、Chracterというコンストラクタのインスタンスになります。
インスタンスの方で指定しているプロパティにアクセスすると、「’John’, 30 ‘Australia’」という値を参照できることがわかります。

オブジェクトのスプレッド演算子

スプレッド演算子「…」を用いると、さまざまな状況に応じてオブジェクトを展開することができます。

以下をみてみましょう。

const obj = { a: 1, b: 2 };

//オブジェクトをクローンする
const cloneObj = {...obj};
console.log(cloneObj); //{ a: 1, b: 2 }

//プロパティを追加し、新しいオブジェクトを生成する
const newObj = {...obj, c: 3};
console.log(newObj); //{ a: 1, b: 2, c: 3 }

//オブジェクトをマージする
const mergeObj = {...obj, ...{ c: 3, d: 4 }}
console.log(mergeObj); //{ a: 1, b: 2, c: 3, d: 4 }

//元のオブジェクトと同じプロパティ名がある場合、値を置き換える
const replaceObj = {...obj, b: 10};
console.log(replaceObj);  //{ a: 1, b: 10 }

実行結果
JavaScript object

オブジェクトのプロパティが沢山ある場合は、スプレッド演算子を使うことで、プロパティの参照や追加をかんたんに行うことがでるため、便利です。

オブジェクトの分割代入

オブジェクトのプロパティにアクセスする際に、何度も「obj.プロパティ名」などと記述すると、効率が悪いと感じます。
そういった場合には、分割代入を使用することで効率良く記述できるようになります。

const obj = { 
  a: 1, 
  b: 2,
  c: 3 
};

const { a, b, c} = obj;

console.log(a); //1
console.log(b); //2
console.log(c); //3

実行結果
JavaScript object

オブジェクトから「a, b, c」のプロパティ名を取り出して、変数として定義します。
このように分割代入することで、呼び出したいプロパティ名を記述するだけで、プロパティへのアクセスができるようになります。

オブジェクトの変更

プロパティにアクセスする方法で、値を変更することができます。

const obj = { 
  a: 1, 
  b: 2,
  c: 3 
};

obj.c = 10;

console.log(obj); //{ a: 1, b: 2 , c: 10 }

「c」の値が、「3」から「10」に変更されました。

オブジェクトの削除

つぎは、オブジェクトを削除してみましょう。
「delete演算子」を使用してオブジェクトの削除ができます。

const obj = { 
  a: 1, 
  b: 2,
  c: 3 
};

delete obj.c;

console.log(obj); //{ a: 1, b: 2 }

「c」の値が削除されました。

まとめ

今回は、JavaScirptのオブジェクトの操作方法にフォーカスして解説をしました。
オブジェクトには、さまざまな手法により操作することが可能です。

オブジェクトの作成方法やプロパティの取得は、基礎的な操作ではありますが、今後JavaScriptの応用を学んでいくにあたり、非常に重要な知識となります。

これを機にオブジェクトの知識をしっかりと身につけていきましょう。

Javascript関連記事