【Javascript】 分割代入について（オブジェクト編）ーDestructuring Objects

初めに

ES6に新たに導入された便利な構文の一つに「分割代入（destructuring)」があります。前回に引き続き、分割代入について学習した内容をもとにいろいろ試してみました。外部APIを利用する際に非常に役に立つので記事にしてみました。

前回の記事
:https://qiita.com/redrabbit1104/items/3ba4783c658ebfa624a0

※内容に間違いなどがある場合はご指摘をよろしくお願いします。

オブジェクトを分割代入してみる

① 配列の代入と違うところ（注意点）

配列を分割代入する場合、配列の中身はindexによって取得できるため変数名を指定するだけで済みました。これに対してオブジェクトはkeyとvalueが存在するので書き方が若干違います。

//配列の場合
const flowers = ['薔薇', '桜', '朝顔', 'ひまわり']
const [a, b, c, d] = flowers;
console.log(a, b, c, d);

指定した変数a,b,c,dにそれぞれの値が入っていることが分かります。

同じ要領でfruitというオブジェクトで試してみました。

//オブジェクトの場合
const fruits = {
  name: 'apple',
  price: 200,
  taste: 'good',
}
const { a, b, c } = fruits;
console.log(a, b, c);

結果はundefinedです。オブジェクトはkeyとvalueの２つの要素になっているので、変数名はjavascript側で認識できるような形にしなければなりません。

②key名を変数名として使う

オブジェクトを分割代入したい場合にはkey名を変数名に指定すれば簡単に値が取れます。

//key名を変数名として指定する
const fruits = {
  name: 'apple',
  price: 200,
  taste: 'good',
}

const { name, price, taste } = fruits;
console.log(name, price, taste);

変数name, price, tasteにそれぞれの値が代入されていることがわかる。

しかし、このままでは代入する変数名とオブジェクトのkey名が同じになってしまいます。

③key名:変数名

オブジェクトを分割代入として認識させるにはkey名がなければなりません。そこでkey名の横に':'を付けてその隣に指定したい変数名を入れる方法があります。

//name,price,tasteのキーを変数a,b,cに指定する
const fruits = {
  name: 'apple',
  price: 200,
  taste: 'good',
}

const { name: a, price: b, taste: c } = fruits;
console.log(a, b, c);

結果としてキーの値（value)が出力されます。違うのは今回はa,b,cという変数名であり、キー名ではありません。

④デフォルト値を指定

配列の分割代入と同様、オブジェクトの分割代入も取れた値がなかった場合のためのデフォルト値を指定することができます。デフォルト値は'=値'にすることで指定できます。4番目のplaceはfruitsの中身として存在すると仮定した上で、任意に付けたキー名です。

const fruits = {
  name: 'apple',
  price: 200,
  taste: 'good',
}

const { name: a = 'null', price: b = 'null', 
        taste: c = 'null', place = 'null' } = fruits;
console.log(a, b, c, place);

placeというキーは存在しないため、デフォルト値に指定した'null'が表示されます。

④宣言した変数の値を分割代入で上書き

一度宣言した変数をオブジェクトにある変数に上書きすることもできます。配列の分割代入と同じやり方でやってみます。

const fruits = {
  name: 'apple',
  price: 200,
  taste: 'good',
}

let name = 'banana';
let price = 300;
let taste = 'not bad';
{ name, price, } = fruits;
console.log(name, price, taste);

見事にエラーが出ます。原因としては{}はjavascriptではcode blockとして認識するため、{で始まるとシンタックスエラーが出ます。これは即時関数の時と同じです。

なのでコードを( )で囲ってあげます。

const fruits = {
  name: 'apple',
  price: 200,
  taste: 'good',
}

let name = 'banana';
let price = 300;
let taste = 'not bad';
({ name, price, } = fruits);     // (  )で囲む　
console.log(name, price, taste);

nameとpriceが'apple'と200に上書きされました。tasteはそのまま'not bad'で表示されます。

⑤ネストされているオブジェクトから分割代入して値を取る

オブジェクトの中にオブジェクトがある場合には次のように分割代入します。

const fruits = {
  apple: {
    place: {
      tokyo: 'apple',
      nagoya: 'banana',
      koube: 'orange'
    },
  },
};

const {
  place: { tokyo, nagoya, koube },
 } = fruits.apple;
console.log(tokyo, nagoya, koube);

若干複雑になってきますが、値はちゃんと取れてます。

参考サイト