- 開発技術
【JavaScript】分割代入について
- JavaScript
はじめに
【エンジニア募集中】フルリモート可◎、売上/従業員数9年連続UP、平均残業8時間、有給取得率90％、年休124日以上 etc. 詳細はこちらから＞
分割代入という便利な構文についてご紹介します。
配列やオブジェクトの中身を分解し、複数の変数に代入することができます。
※分割代入を利用するには、ES2015(ES6)に対応した環境が必要です。
配列の分解
配列の要素を複数の変数にそれぞれ代入できます。
以下の2行目が分割代入の構文です。変数a, bにそれぞれ2, 5を代入しています。
|
1 2 3 |
const arr = [2, 5] const [a, b] = arr console.log(a, b) // 2 5 |
コンマを用いて特定の要素のみを取得することも可能です。 分割代入の末尾に「…<変数名>」と記載することで残りの要素を配列として取得できます。
|
1 2 |
const [,, a,, b, ...c] = [1, 2, 3, 4, 5, 6, 7, 8]; console.log(a, b, c); // 3 5 [ 6, 7, 8 ] |
オブジェクトの分解
オブジェクトのプロパティを複数の変数にそれぞれ代入できます。 配列の分割代入では代入の左辺は[]で囲んでいましたが、オブジェクトの場合は{}で囲んでいることにご注意ください。
|
1 2 3 |
const obj = {b: 'str', a: 123} const {a, b} = obj console.log(a, b) // 123 str |
上の例から分かる通り、基本的にはプロパティ名と同じ変数名の変数に代入されます。 プロパティ名に存在しない変数名を左辺に指定した場合、値はundefinedになります。
|
1 2 3 |
const obj = {b: 'str', a: 123} const {a, c} = obj console.log(a, c) // 123 undefined |
オブジェクトのプロパティ名と異なる変数名で値を代入したい場合、以下のような記述で代入することができます。
|
1 2 3 |
const obj = {b: 'str', a: 123} const {a: foo, b: bar} = obj console.log(foo, bar) // 123 str |
値の入れ替え
変数の値を入れ替えることもできます。1行で交換できるため、便利です。
|
1 2 3 |
let [x, y] = [1, 2]; [x, y] = [y, x]; console.log(x, y); // 2 1 |
終わりに
本記事では、分割代入の基本的な利用方法についてご紹介しました。 便利な構文なので、ぜひ今後の開発で利用してみてください。
参考: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
【エンジニア募集中】フルリモートも◎(リモート率85.7％)、平均残業8時間、年休124日以上、有給取得率90％ etc. 詳細はこちらから＞
