アロー関数(allow operator )「=>」の記号はJavascript以外でも見かけますが、今回はJavascriptのアロー関数の使い方について調べてみます。
Javaの場合はラムダ式で出てきます。
アロー関数とは (Arrow function expression)
イコールと大なり記号「=>」で構成されています。アロー関数を使用することでfunctionなどの記述を省略して書くことができます。ES2015(ES6)で登場した構文の一つで、これから目にする機会が増えていくかと思います。
見た目が矢(arrow)のようだからアローと呼ぶんだろうなと思っています。
書き方 (従来との比較)
書き方は色々ありますが、まず簡単な比較です。
// 従来の書き方 (ES6前)
var str = “Hello”;
console.log(show(str));
function show(str){
return str + ” World!”
}
// アロー関数の書き方 (ES6)
let str = “Hello”;
show = val => val + ” World”;
console.log(show(str));
気持ちアロー関数の方がスタイリッシュです。
アロー関数書き方のルール
()やreturnは条件によっては省略が可能です。
returnと { }は1行の場合省略できる
let str = “Hello”;
show = val => val + ” World”; // 戻り値(return)の省略OK
show = val => {
val + ” World”; // 戻り値 (return) はなしのため str はundefinedとなる
}
console.log(show(str));
{ } は書いた場合 return が必要な場合returnは記入
let str = “Hello”;
show = val => val + ” World”; // {}の省略OK
show = val => { val + ” World” }; // { }を書いた場合はreturnが必要な場合は必須
console.log(show(str));
引数のカッコは1つの場合省略可
let str = “Hello”;
let str2 = “!”;
show = val => val + ” World”; // OK
show = (val) => val + ” World”; // OK
show2 = (val1, val2) => val1 + ” World” + val2; // OK
show2 = val1, val2 => val1 + ” World” + val2; // NG 引数が複数の場合は () は必須
console.log(show2(str, str2));
引数がない場合は ( ) は必須
show = () => “Hello World”; // OK
show = => “Hello World”; // NG
console.log(show());
アロー関数よく使われる配列のメソッド
例えばfilter()やforEach(),Map()などと組み合わせて使われているのをよく見かけます。
サンプルコード
const arr = [1, 2, 3];
arr.forEach( num => console.log(num) );
おわり
初心者の場合は、あまりアロー関数を用いて自作のプログラムを書くというよりは、配列などのメソッドと組み合わせて使うことが多くあるのかなと思います。
なるべく使って慣れたいところです。
参考
https://www.w3schools.com/js/js_arrow_function.asp
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions
