モダンなJavaScriptのお勉強：分割代入編

今回は、分割代入 についてまとめます。

代入とは、変数への値を設定することです。 例えば、JavaScript で次のようなオブジェクトがあるとします。

const customer = {
    id:       1,
   name:  "のべ",
   email:  "xxx@nobelabo.net"
};

この customer オブジェクトから name と email プロパティを取り出して変数に格納したいとします。 分割代入を使わない場合は、次のようになります。

let name = customer.name;
let email  = customer.email;
console.log(name);
console.log(email);  

結果：

のべ
xxx@nobelabo.net

2つの変数を別々に用意して、それぞれ、オブジェクト名.プロパティ名 を指定して代入していますが 分割代入を使うと、もっとシンプルに変数に値を代入できます。 では、分割代入を使って同じことをやってみましょう。

let  { name,  email }  = customer;
console.log(name);
console.log(email);  

結果：

のべ
xxx@nobelabo.net

いかがでしょう？

変数宣言で、{ } で囲って複数の変数を指定しています。 これらの変数に、customer のプロパティ名と一致している値が代入されています。 この例では { name, email } という順で指定していますが、{ email, name } のように順番が変わっても大丈夫です。 少しシンプルにできましたね。

次に、変数名を代入元のオブジェクトのプロパティ名と違うものにする方法をみてみましょう。

let  { name: customerName,  email: customerEmail }  = customer;
console.log(customerName);
console.log(customerEmail);  

結果：

のべ
xxx@nobelabo.net

変数宣言時に、{プロパティ名: 任意の変数名 } とすることで実現できますね！

この分割代入ですが、オブジェクトだけでなく配列でも使用できます。 配列の場合は、変数を [ ] で囲みます。

const  colors = ["Red", "Blue", "Yello"];
let  [  red,  blue ]  = colors;
console.log(red);
console.log(blue);  

結果：

Red
Blue

ただし配列の分割代入の場合、配列の要素順にしか値を代入できません。 例えば、次のようなコードにすると、blue 変数には 文字列 "Red" が、red 変数には 文字列 "Blue" が代入されますのでご注意ください。

const  colors = ["Red", "Blue", "Yello"];
let  [  blue,  red ]  = colors;
console.log(red);
console.log(blue);  

結果：

Blue
Red

まとめ

• オブジェクトの分割代入では、{ } 内でオブジェクトのプロパティ名を指定すれば、順序に関わらず代入できることがわかりました。
  • プロパティ名と同じ変数名にすることも、任意の変数名にすることもできましたね。
• 配列の分割代入では、{ } 内で任意の変数名を指定して代入できますが、あくまで配列の要素順で代入されることに注意しましょう！