JavaScript (ES2015) 分割代入でセミコロンがないとエラーになるトラップにはまる。

ECMAScript2015 (ES2015 / ES6)で追加された、配列やオブジェクトを分割して変数に代入できる分割代入で色々エラーになってハマったのでメモ。

分割代入 Destructuring assignment

分割代入 - JavaScript | MDN とは

// 配列
let [a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

// オブジェクト
let {cute, cool, sexy, ...other} = {
  cute:   '星宮いちご',
  cool:   '霧矢あおい',
  pop:    '有栖川おとめ',
  sexy:   '紫吹蘭',
  legend: '神前美月'
};
console.log(cute);  // 星宮いちご
console.log(cool);  // 霧矢あおい
console.log(sexy);  // 紫吹蘭
console.log(other); // { pop: '有栖川おとめ', legend: '神前美月' }

こんなの。
配列は前から順番(インデックス順)に、オブジェクトは変数名と合致するプロパティの値が変数に代入される。

変数宣言外で分割代入をする際のトラップ

オブジェクトの分割代入を行う時、全体を()で囲ってないとエラーになる

変数宣言とオブジェクトの分割代入を別に行う場合は、分割代入の式全体を()で囲ってないとSyntaxError: Unexpected token

let a, b;
{a, b} = { a: 10, b: 20 };
console.log(a, b);
// {a, b} = { a: 10, b: 20 }
//       ^
// SyntaxError: Unexpected token =

↓ 分割代入全体を()で囲う

let a, b;
({a, b} = { a: 10, b: 20 });
console.log(a, b); // 10 20

分割代入の前の文にセミコロン;が無いとエラーになる場合がある

変数宣言だけだとエラーにならない

let a, b
[a, b] = [1, 2]
console.log(a, b) // 1, 2

変数宣言時に値を代入しているとReferenceError: X is not defined

let a = 1, b = 2
[a, b] = [b, a]
console.log(a, b)
// [a, b] = [b, a]
//    ^
// ReferenceError: b is not defined

↓ 前の文にセミコロン;があればエラーにならない

let a = 1, b = 2;
[a, b] = [b, a]
console.log(a, b) // 2 1

分割代入の直前に文末にセミコロン;がないconsole.log()のような文があるとTypeError

let a = 1, b = 2
console.log(a, b)
[a, b] = [b, a]
console.log(a, b)
// [a, b] = [b, a]
//        ^
// TypeError: Cannot set property '2' of undefined

↓ 分割代入直前の文末にセミコロン;をつければOK

let a = 1, b = 2
console.log(a, b); // 1 2
[a, b] = [b, a]
console.log(a, b)  // 2 1

別に前の文の文末でなくても、分割代入式の直前にセミコロンがあればOKっぽい

let a = 1, b = 2
console.log(a, b) // 1 2
;
[a, b] = [b, a]
console.log(a, b)  // 2 1

分割代入式の前に;を書いてしまってもOK

let a = 1, b = 2
console.log(a, b) // 1 2
;[a, b] = [b, a]
console.log(a, b)  // 2 1

分割代入の直前がブロックとか、セミコロン;で文の終わりが明示されていればエラーにならないっぽい？

let a = 1, b = 2
{} // function func() {} とかでもOK
[a, b] = [b, a]
console.log(a, b) // 2 1

オブジェクトでも同様。分割代入式の直前が;かブロックでないとエラー

let cute, cool
({cute, cool} = { cute: '星宮いちご', cool: '音城セイラ' })
console.log(cute, cool) // 星宮いちご, 音城セイラ

変数宣言だけなら文末にセミコロン;がなくてもエラーにならないが、
変数宣言時に初期値の代入があるとエラー (TypeError)

let cute = '星宮いちご', cool = '霧矢あおい'
({cute, cool} = { cute: '大空あかり', cool: '氷上スミレ' })
// ({cute, cool} = { cute: '大空あかり', cool: '氷上スミレ' })
// ^
// TypeError: "霧矢あおい" is not a function

↓ 代入している文章が終わってなく、分割代入の式が続いていて関数だと判断されているので、分割代入式の前に;をつけるか、ブロックになる式が入ればOK

let cute = '星宮いちご', cool = '霧矢あおい';
({cute, cool} = { cute: '大空あかり', cool: '氷上スミレ' })
console.log(cute, cool) // 大空あかり 氷上スミレ

とか

let cute = '星宮いちご', cool = '霧矢あおい', n = 5
while(n--) { console.log(n) }
({cute, cool} = { cute: '大空あかり', cool: '氷上スミレ' })
console.log(cute, cool) // 大空あかり 氷上スミレ

ブロック式があるとか

var cute = '星宮いちご', cool = '霧矢あおい'
;({cute, cool} = { cute: '大空あかり', cool: '氷上スミレ' })
console.log(cute, cool) // 大空あかり 氷上スミレ

分割代入式の先頭を;で始めるとか

分割代入の前に入る文がブロックでない場合は文末にセミコロン;が無いとエラーになる (TypeError)

function myFunc() { console.log('OKOKOK-') }
var sexy = '神前美月', pop = '夏樹みくる'
myFunc()
({sexy, pop} = { sexy: '風沢そら', pop: '冴草きい' })
// ({sexy, pop} = { sexy: '風沢そら', pop: '冴草きい' })
// ^
// TypeError: myFunc(...) is not a function

↓ 分割代入の直前にセミコロン;があればOK

function myFunc() { console.log('OKOKOK-') }
var sexy = '神前美月', pop = '夏樹みくる'
myFunc();
({sexy, pop} = { sexy: '風沢そら', pop: '冴草きい' })
console.log(sexy, pop) // 風沢そら 冴草きい

　

まとめ

変数宣言と同時でない分割代入は、下記パターンで文章が続いていると判断されてエラーになるようです。

• オブジェクトの場合は分割代入の式全体を()で囲ってないとエラーになる
• 分割代入式の直前が「変数宣言のみ」又は、セミコロン;かブロック{}でないとエラーになる

　
最近のJSのコードやESLintで、JSでセミコロン;は不要になったみたいな印象を勝手に受けてたのですが、基本的に必要な文末にはセミコロン付けるようにした方が良いんじゃないかなって思いました。
変数宣言と同時でない所で使う分割代入式はセミコロン;から始めること。としても良いかもですが、この方がLintとかに怒られたりで設定とかが面倒そうです…

---

[参考]

• 分割代入 - JavaScript | MDN
• ECMAScript 2015 の分割代入は奥が深かった - Qiita
• セミコロンに関する ESLint ルール - Qiita

速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター！ 速習シリーズ