JavaScriptでは関数を定義するときに「function」を使いますが、アロー関数を使えばfunctionなしで関数を定義することができます。
コードによっては、functionのみで記述している場合や、アロー関数のみで記述している場合、あるいは混在している場合など様々です。
そんなときに、困惑しないようにそれぞれの書き方や変換方法を知っておくことが大切です。
ここでは、アロー関数の使い方やfunctionをアロー関数に書き換える方法について実例を用いて解説しています。
アロー関数とは何か？
アロー関数はES6（ECMAScript 2015）で導入された関数の定義方法です。
従来のfunctionを使用した関数定義に比べて、簡単に記述することができます。
アロー関数の基本構文
アロー関数は以下のように定義します。
const 関数名 = (引数) => {
// 処理
};関数ですが、functionのように明らかな関数定義ではなく、constを使って変数として関数を定義します。
constは再定義・再代入不可の変数を定義するものです。
constで定義した変数に「引数」と「処理」のセットを代入します。「引数」と「処理」をつなぐ記号として「=>」という矢印（アロー）を使うため、アロー関数と呼ばれます。
- constで関数名を定義する
- =で、
(引数)=>{処理}を代入する
functionとアロー関数
functionとアロー関数は互換性があるため書き換えることができます。
具体的には次の3ステップで書き換えが完了します。
- 「function」を「const」に変える。
- 引数の()の前に「=」をつける。
- ()と{}の間に「=>」をつける。
実例1：引数がない場合
最初にわかりやすい例として引数がないものを紹介します。例えば、以下のようなfunctionがあるとします。
function myFunc(){
let x = "aaa";
console.log(x);
}
myFunc();
これをアロー関数で書き換えると次のようになります。
const myFunc = () => {
let x = "aaa";
console.log(x);
}
myFunc();実例2: 引数がある場合
引数がある場合も書き方は同じです。
function greet(name) {
let res = `こんにちは${name}さん。`;
console.log(res);
}
greet("田中太郎");
これをアロー関数で書き換えると次のようになります。
const greet = (name) => {
let res = `こんにちは${name}さん。`;
console.log(res);
}
greet("田中太郎");実例3: 1行で記述する
簡単な関数なら1行で記述することができます（functionもアロー関数もどちらも1行で書けます）
function multiply(a, b) { console.log(a * b); }
multiply( 3, 4 )
これをアロー関数で書き換えると次のようになります。
const multiply = (a, b) => { console.log(a * b); }
multiply( 3, 4 )コールバック関数でアロー関数で記述する
コールバック関数のfunctionをアロー関数を使って書き換えることもできます。
通常のfunctionで定義した関数を書き換える場合と少し異なるので注意が必要です。
- functionを削除する。
- 引数のカッコを外す（※引数が1つの場合のみ）
- 引数と処理を「=>」でつなぐ（※処理が1行の場合は{ }を削除）
引数が1つの場合
例えば、map, foreachなどはアロー関数を使って記述するのが一般的です。
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(function (number) {
return number * 2;
});
console.log(doubled);
これをアロー関数で書き換えると次のようになります。
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);
console.log(doubled);引数が２つ以上の場合
引数が2つ以上ある場合は、引数の部分を()で囲みます。
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map( ( elem, index ) => elem * index);
console.log(doubled);処理が複数行の場合
処理が複数行になる場合は { } を使います。
const doubled = numbers.map( ( elem, index ) => {
val = elem + 1;
res = val * index;
console.log( elem * index );
return res
})
console.log(doubled);即時関数をアロー関数で記述する
即時関数をアロー関数で記述することもできます。
(function() {
const message = 'こんにちは!';
console.log(message);
})();
これをアロー関数で書き換えると次のようになります。
(() => {
const message = 'こんにちは!';
console.log(message);
})();