アロー関数を書いていて、矢印の後に波カッコ{ }をつける場合と付けない場合で出力が変わってくる。
波カッコなしの例
arr = [1,2,3,4,5]
arr1 = arr.map((x)=> x*2)
//出力 [2, 4, 6, 8, 10]
波カッコありの例
arr = [1,2,3,4,5]
arr1 = arr.map((x)=> {x*2})
//出力 [undefined, undefined, undefined, undefined, undefined]
波カッコを使うメリットと注意点
波カッコを使うメリットは、複数の式を記述できること。
波カッコを使う場合は必ずreturnが必要になる。
波カッコありの例
arr = [1,2,3,4,5]
arr1 = arr.map((x)=> {return x*2})
//出力 [2, 4, 6, 8, 10]
波カッコを使った例
下記のように、複数の式を記述できるようになる。
波カッコあり
arr = [1,2,3,4,5]
arr2 = arr.map((x)=> {
x = x*2,
x = x+1
return x
})
console.log(arr2)
//出力
[3, 5, 7, 9, 11]
波カッコが不要な場合
一つの式でかける場合は波カッコ不要。returnも省略できる。
波カッコなし
arr = [1,2,3,4,5]
arr3 = arr.map((x)=> x*2+1)
console.log(arr3)
// [3, 5, 7, 9, 11]
▼省略しない場合
波カッコ省略しない場合
arr = [1,2,3,4,5]
arr3 = arr.map((x)=> {return x*2+1})
console.log(arr3)
// [3, 5, 7, 9, 11]
なお、returnなしで波カッコを付けてしまうと、欲しい出力は得られない。
returnなし
arr = [1,2,3,4,5]
arr4 = arr.map((x)=> {x*2+1})
console.log(arr4)
// [undefined, undefined, undefined, undefined, undefined]
いっそエラーになってくれるとわかりやすいのだが、エラーにはならないので注意が必要。
追記
ついつい難解な気がして避けがちなmozillaの説明を読み解いてみる。
▼ページの内容
基本的な構文
(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
// 上記の式は、次の式と同等です: => { return expression; }
// 引数が 1 つしかない場合、丸括弧 () の使用は任意です:
(singleParam) => { statements }
singleParam => { statements }
// 引数がない場合、丸括弧を書かねばいけません:
() => { statements }
▼内容確認
1つめ
(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
(param1, param2, …, paramN) => { return expression; }
・(param1, param2, …, paramN)
引数をparamで表している。数は任意。
・statements
文。実行する処理のことをいう。
変数宣言や代入、四則演算などが文にあたる。
文
var x, y, z;
x = 5;
y = 6;
z = x + y;
実行する命令のリスト。
＞W3C statements
・expression
式。一意の値を返すもの
結果が数値、文字列、true/falseになるものが式。
式
1 / 2
i -= 2
i * 2
'A ' + 'string'
2
0.02
'something'
true
false
[1,2,3]
{}
a && b
a || b
!a
・{ return expression; }
expressionにreturnをつけると文（statement）として扱うことができる。
まとめ
英語のそもそもの意味を理解する必要があった。。
・statements: 文。（AをBにするといった命令）
・expression: 式。（一意の値を返す）
・param: 引数
・singleParams: 引数一つ