分割代入

JavaScript分割代入について動作をまとめてみました。分割代入は配列やオブジェクトの中身を複数の変数に代入できる構文です。

配列の場合

順番に代入されます。

const arr = ["123", "456"];

const [ arr1, arr2 ] = arr;
console.log(arr1);
console.log(arr2);
> 123
> 456

オブジェクトの場合

変数名と一致するメンバー名に代入します。次のようなオブジェクトで動作を見てみます。

const object = {
  name: "roto",
  age: 16,
  memo: "qwer",
}

変数名と一致するメンバー名に代入。

const { name, age } = object;
console.log(name);
console.log(age);
> roto
> 16
const { name, memo } = object;
console.log(name);
console.log(memo);
> roto
> qwer

順番を変更してもメンバー名と同じ変数名に代入します。

const { age, memo, name } = object;
console.log(name);
console.log(age);
console.log(memo);
> roto
> 16
> qwer

変数名と一致するメンバー名が見つからない場合は代入されません。

const { name, a, age } = object;
console.log(name);
console.log(a);
console.log(age);
> roto
> undefined
> 16
const { name, a, m } = object;
console.log(name);
console.log(a);
console.log(m);
> roto
> undefined
> undefined
このエントリーをはてなブックマークに追加
にほんブログ村 IT技術ブログへ

関連コンテンツ

スポンサードリンク

Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です