分割代入構文は、配列、オブジェクトから値を取り出して別個の変数に代入することを可能にするJavaScriptの式です。
![](https://developer.mozilla.org/mdn-social-share.cd6c4a5a.png)
■オブジェクトから取り出す場合
message1はテンプレートリテラルを用いた記述です。
message2は分割代入構文になります。
consoleに出力した結果は同様です。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const myProfile = { name:"もり", age:28, }; //テンプレートリテラル const message1 = `名前は${myProfile.name}です。年齢は${myProfile.age}歳です。`; console.log(message1); //分割代入 const {name,age} = myProfile; const message2 = `名前は${name}です。年齢は${age}歳です。`; console.log(message2); |
![](https://code.shougomori.site/wp-content/uploads/2020/11/スクリーンショット-2020-11-17-11.00.45.png)
■配列から取り出す場合
message3はテンプレートリテラルを用いた記述です。
message4は分割代入構文になります。
consoleに出力した結果は同様です。
1 2 3 4 5 6 7 8 9 10 11 |
//配列 const myProfile = ['もり', 28]; //テンプレートリテラル const message3 = `名前は${myProfile[0]}です。年齢は${myProfile[1]}歳です。`; console.log(message3); //分割代入 const[name,age] = myProfile; const message4 = `名前は${name}です。年齢は${age}歳です。`; console.log(message4); |