複数の要素をもつオブジェクトや配列を１つずつ変数に代入する

こういうコードが読めなかった。


const[num1] = client.exe();

調べて見ると、分割代入って構文らしい。ES6から取り入れられた分割代入。
従来より配列/オブジェクトを分解して、要素やプロパティ値を取り出しやすくなったようだ。

ってことで、調べてみた。

配列の要素を変数に分割代入する構文

[配列]分割代入


//ES6以前の分割代入
var data = [20,49,59,37,62];
var x0 = data[0];
var x0 = data[1];
var x0 = data[2];
var x0 = data[3];
var x0 = data[4];

//ES6の分割代入
let numbers = [40, 50, 20, 70,];
let[a1, a2, a3, a7] = numbers;

console.log(a3); //結果:20
console.log(a4); //結果：ReferenceError a4 is not defiend.
console.log(a7); //結果:70

配列numbersの40,50,20,７０がそれぞれa1,a2,a3,a7に分割代入された。
変数の並び順は配列のプロパティの並び順と同じになるため、
未定義であるa4はリファレンスエラーとなるし、a7には配列numbersの４番目のプロパティである70が代入されていることがわかる。

！note

・配列とオブジェクトの大きなちがいって、順番が割り振られているかどうかだよね！
・ES6以前のコードも２０２０年現在まだ見かけるらしいから、読めるようになった方がいいよね！

[配列]要素をまとめて配列として切り出す。


let numbers =[40, 50, 60, 18, 95, 34];
let[a1, a2, a3, ...other] = numbers;

console.log(other); //結果:[18, 95,34]

演算子...を使用することで、分割されなかったプロパティ値をまとめて配列として切り出せる。

変数の入れ替え


let a = 10;
let b = 60;
[a,b] = [b,a];
console.log(a,b); //結果:60,10

要素の切り捨て

let num = [75,34,16,345,923,590,65,21,98];

let[num1,num2,num3, , , , ...rest] = num;
//345,923,590は切り捨て
console.log(num3); //結果:16
console.log(rest); // 結果[65,21,98]

あのコードはいったい何だったのか


const[num1] = client.exe();

これまでの書いてきたことを踏まえると、このコードがよめる。

右辺は何かしらの配列を生み出す処理になっていて、
左辺でその１番目の値だけをnum1に代入した。

それだけのことだ。
ついでなので、オブジェクトの分割についても調べた。

オブジェクトのプロパティ値を変数に分解する構文

[オブジェクト]分割代入


let banana = {color:'黄色', price:100, from:'インドネシア'};
let{from, color, memo='なし'} = banana

console.log(from); //結果：インドネシア
console.log(memo); //結果:なし

オブジェクトの場合は名前でプロパティを個々の変数に分解する。
なので、変数の並び順はプロパティの定義順と違っていてもいい。
また、分解しないプロパティ（上記ではprice）があってもいい。
さらに、目的のプロパティがない場合に「変数名 = デフォルト値」としてデフォルト値を指定しておくこともできる（上記、memo:なし）

入れ子となったオブジェクトを分解する


let car = {name:'プリウス', price:1,000,000,
           other:{color:'silver', tire:'studless'}};

let{name, other, other:{ tire }} = car;

console.log(name); //結果:プリウス
console.log(other); //結果:{color:'silver', tire:'studless'}
console.log(tire); //結果:studless

otherとして定義するとオブジェクトotherの内容が格納される。
other:{tire}とすると、オブジェクトotherのプロパティtireの値であるstudlessが格納される。

変数の別名を指定する。

//別名を指定する
let seminor = {title:'アフターコロナ', data:'2020.6.10', price:5000};
let { title:name, data:day} = seminor

console.log(name) //結果：アフターコロナ
console.log(day) //結果：2020.6.10

宣言のない代入

//宣言のない代入
let journey = {data:2020/3/3, price:'priceless'};

let location, price;
({location='千葉', price} = journey);
console.log(location); //結果：千葉
console.log(price) //結果:undefined

分割代入するときに前後を()で囲わないといけない。
{}のみだとブロックだとみなされ、文だとみなされないため。

参照

JavaScript本格入門~モダンスタイルによる基礎から応用まで
 分割代入 -JavaScript|MDN
《JavaScript》ES6の分割代入のはじめかた。
JavaScriptの代入において時々現れる、括弧で囲まれた変数名は何なのか