2022/08/06
JavaScriptの分割代入構文を使いこなそう
はじめに
JavaScriptにES6から導入された分割代入構文の紹介です。
配列やオブジェクトを扱う処理が非常にシンプルに記述可能になります。いくつか例を紹介します。
その１：配列の分割代入
分割代入を使ってないバージョン
|
1 2 3 4 5 | const array = ['one', 'two', 'three']; const one = array[0]; const two = array[1]; const three = array[2]; console.log(one, two, three); |
分割代入を使ったバージョン
|
1 2 | const [one, two, three] = ['one', 'two', 'three']; console.log(one, two, three); |
その２：変数の入れ替え
分割代入を使ってないバージョン
|
1 2 3 4 5 6 7 8 | let a = 1; let b = 3; let tmp = a; a = b; b = tmp; console.log(a, b); |
分割代入を使ったバージョン
|
1 2 3 4 5 6 | let a = 1; let b = 3; [a, b] = [b, a]; console.log(a, b); |
その３：オブジェクトの一部だけを使う
分割代入を使ってないバージョン
|
1 2 3 4 5 6 7 8 | const list = { a: "AAA", b: "BBB", c: "CCC" }; const head = list.a; const tail = list; delete tail.a; console.log(head); console.log(tail); |
分割代入を使ったバージョン（スプレッド構文…との組み合わせ）
|
1 2 3 4 5 | const list = { a: "AAA", b: "BBB", c: "CCC" }; const { a: head, ...tail } = list; console.log(head); console.log(tail); |
まとめ
全体的に分割代入を使ったバージョンのほうがコードが短くなり、変数宣言も減ってシンプルになっていることが分かると思います。その反面、説明用のローカル変数がなくなったことで意図が伝わりづらくなったという解釈もできそうです。使いどころには気をつけましょう。
参考
Author Profile
SHARE
