分割代入とスプレッド構文

このレッスンでは、JavaScriptの分割代入とスプレッド構文を使いこなし、オブジェクトや配列から値を効率よく取り出したり結合したりできるようになることを目標にします。「JavaScript 分割代入 使い方」「JavaScript スプレッド構文」で調べている方向けです。

分割代入を使うと、オブジェクトや配列から値を一気に取り出せます。const { name, age } = user;のように書くと、user.nameとuser.ageを一度に別々の変数として取り出せます。スプレッド構文(...)は配列やオブジェクトを展開してコピーしたり、結合したりするのに使います。どちらも実務のコードで非常によく登場するモダンな書き方です。

サンプルコードでは、オブジェクトuserからnameとageを分割代入で取り出し、配列numsをスプレッド構文で展開して新しい要素を追加したnewNumsを作っています。従来なら何行もかけて1つずつ取り出していた値を、たった1行で取り出せるようになるため、コードが読みやすく、書く量も大幅に減らせます。

初心者がよくつまずくのが、分割代入で指定する名前は元のプロパティ名と一致させる必要がある点です。存在しないプロパティ名を指定すると、エラーにはならずundefinedになってしまいます。また、スプレッド構文は「浅いコピー」しか作らないため、入れ子になったオブジェクトまでは複製されない点にも注意が必要です。

実際の開発現場では、関数の引数として渡されたオブジェクトから必要な値だけを取り出したり、Reactなどのライブラリで状態(state)を更新する際にスプレッド構文で元のデータをコピーしてから一部だけ変更したりと、モダンなJavaScriptを書くうえで欠かせない記法として定着しています。

分割代入では、取り出す変数に別名を付けることもできます。const { name: userName } = user;のように書くと、nameプロパティの値をuserNameという別の変数名で受け取れます。元のプロパティ名と衝突を避けたいときに便利です。

オブジェクトの分割代入では、デフォルト値を同時に指定することもできます。const { age = 18 } = user;のように書けば、ageプロパティが存在しない場合に自動的に18が使われる、というデフォルト引数と似た仕組みが実現できます。