【JavaScript】オブジェクトや配列の操作が楽になる分割代入の使い方

オブジェクトや配列を定義して利用する際に、コードを短縮して可読性を向上させる分割代入の使い方についてご紹介していきます。

本記事で学習できること

オブジェクトの分割代入の使い方
配列の分割代入の使い方

オブジェクトや配列の操作が楽になる分割代入

オブジェクトや配列の操作が楽になる分割代入

同じオブジェクトのプロパティや配列では配列名と要素番号を何度も利用する場合に、『オブジェクト.プロパティ名』や『配列名[要素番号]』と書き続けるのは大変ですし、とても面倒ですよね。

さらにオブジェクト名やプロパティ名、配列名が長かったり、配列のように要素番号で指定していると何を利用しているのか一目で判断することができずコード全体も見にくくなってしまいます。

dogオブジェクトを利用したコードサンプル

const dog = {
  name: "ダックスフンド",
  age: 10,
  birthplace: "埼玉県"
};
//オブジェクト名のdogを複数使用しているため記述が長くなる
const message =  "私は" +  dog.name +  "です。" +  dog.age +  "才です。出身は" +  dog.birthplace +  "です。";

console.log(message);

出力結果：私はダックスフンドです。10才です。出身は埼玉県です。

上記の例ではひたすらdogと記述し続けています。今回はサンプルなので短いオブジェクト名とそこまで多くない利用回数でしたが、実際の開発ではしっかりとした意味を持たせるために長くなる傾向があり、もっと多用される場合もあります。

そのため、短い名前で利用できるように、そのプロパティを変数として定義し直す『分割代入』という便利な機能がありますのでご紹介していきます。

分割代入の使い方(オブジェクト)

オブジェクトを利用する際の分割代入の使い方について紹介していきます。

オブジェクトの分割代入では右辺にオブジェクト名を記載して、左辺にオブジェクトのプロパティに対応する変数名を新たに定義することができます。

複数のプロパティを持っているオブジェクトの場合には{}波カッコでそれぞれの変数を囲う必要があり、各変数名の間は(,)カンマで区切る必要があります。

分割代入の構文

//プロパティを1つ取り出す
const 変数名 = オブジェクト名;

//複数のプロパティを取り出す
const {変数名,変数名,変数名} = オブジェクト名;

サンプル構文

//dogオブジェクトの宣言(プロパティは3種類持っている)
const dog = {
  name: "ダックスフンド",
  age: 10,
  birthplace: "埼玉県"
};

//dogオブジェクトにはname、age、birthplaceの3つのプロパティが定義されているため波カッコで各変数を囲う
const { name, age, birthplace } = dog;

//プロパティの前にオブジェクト名が必要なくなり短い構文となった
const message =  "私は" +  name +  "です。" +  age +  "才です。出身は" +  birthplace +  "です。";

console.log(message);

出力結果：私はダックスフンドです。10才です。出身は埼玉県です。

dogオブジェクトから複数のプロパティを分割代入で取り出して利用することができました。

Point

分割代入する変数の複数定義はカンマ区切りの{}波カッコで囲う必要がある
分割代入する変数が1つの場合には{}波カッコは必要なし
プロパティ名に対応した変数名を定義する

分割代入の使い方(配列)

分割代入はオブジェクトだけではなく配列に対しても利用できます。

配列を利用する際には通常、配列名[要素番号]で指定する必要があります。

サンプル構文(通常の配列)

//3つの要素を持つ配列dogを定義
const dog = ["コーギー", 8, "東京都"];

//配列dogを要素ごとに記述して値を取り出す
const message =  "私は" + dog[0] + "です。" + dog[1] + "才です。出身は" + dog[2] + "です。";

console.log(message);

出力結果：私はコーギーです。8才です。出身は東京都です。

分割代入の構文(配列)

//配列から要素を順番に取り出す
const [変数名,変数名,変数名] = 配列名;

配列の場合にはオブジェクトのように{}波カッコではなく、[]角カッコでそれぞれの変数を囲う必要があり、各変数名の間は(,)カンマで区切る必要があります。

また、配列にはプロパティと異なり名前(name,ageなど)がないので要素の0～順番に取り出すようになります。

取り出される順番に注意して、対応した名前の変数名を付けるようにしましょう。

サンプル構文(分割代入)

const dog = ["コーギー", 8, "東京都"];

//要素[0]から要素[2]まで左から順番に代入されます。
const [name, age, birthplace] = dog;

const message =
  "私は" + name + "です。" + age + "才です。出身は" + birthplace + "です。";

console.log(message);

出力結果：私はコーギーです。8才です。出身は東京都です。

配列dogの要素は以下の通り