【JavaScript】（ES6）アロー関数の定義

ここでは、JavaScriptのES6から追加されたアロー関数（Arrow Function）についてみていこうと思います。

アロー関数を使うことで、匿名関数（関数リテラル）の表記をシンプルに記述することができます。

具体的なコードでみていきましょう。

アロー関数の定義
まとめ

アロー関数の定義

アロー関数は、次のような形で使います。

（引数, …） => {…関数の本体…}

functionキーワードを使いません。アロー（=>）で関数の本体と繋ぎます。関数本体が1文の場合は波括弧{}は省略できます。

ES5のコードと比較しながら見て行きましょう。

次のような年齢を計算するコードを用意してみます。

const birthYears = [1970, 1980, 1989, 1998, 2005];

// ES5
var ageEs5 = birthYears.map(function(element) {
    return 2019 - element;
});
console.log(ageEs5);

constで定数のリストとしてbirthYearsに5つのデータが入っています。

ES5のコードとしてvarで変数の宣言をして、この定数からmap()を使って配列の要素を取り出してそれぞれの要素処理を処理する匿名関数を定義しています。

map()は配列データに使うメソッドで、各要素1つずつに対してコールバック関数を実行してその結果を新しい配列として返すことができるメソッドです。

map()についてはこちらを参照してください。

Array.prototype.map() - JavaScript | MDN

map() は Array インスタンスのメソッドで、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。

ここでは配列から誕生年のデータを取り出して、年齢を計算するコールバック関数を実行しています。

JavaScriptコンソールに表示するとこうなります。

順に計算された値が配列として格納されています。

これをES6のアロー関数を使って書くとこうなります。

const birthYears = [1970, 1980, 1989, 1998, 2005];

// ES6
let ageEs6 = birthYears.map(element => 2019 - element);
console.log(ageEs6);

ES5のコードと見比べると、スッキリしていると思います。

map()の中に、引数とその処理（上のコードでのreturn文以下の処理）が矢印（=>）でむずばれているだけで、returnキーワードなども不要です。今回は１行でかけるコードなので波括弧{}も必要ありません。

結果は次のように先ほどと同じになります。

上のコードでは引数が一つのアロー関数でしたが、2つの引数を使ったコードを書いてみましょう。

const birthYears = [1970, 1980, 1989, 1998, 2005];

// ES6
let ageEs6 = birthYears.map(element => 2019 - element);
console.log(ageEs6);

ageEs6 = birthYears.map((element, index) => `index:age ${index + 1}: ${2019 - element}.`);
console.log(ageEs6);

ageEs6 = birthYears.map((element, index) => {
    const now = new Date().getFullYear();
    const age = now - element;
    return `index:age ${index + 1}: ${age}.`
});
console.log(ageEs6);

先ほどのコードと合わせて、続けて書いています。letで変数を宣言済みなので、同じ変数を続けて利用しています。

まず、2つの引数を丸括弧()を使って利用しています。引数は配列の要素とインデックスを取っています。これを矢印で繋げて、バッククォートを使ったテンプレート文字列でそれぞれの要素を表示するようにしています。

テンプレート文字列はこちらを参照してください。

【JavaScript】（ES6）テンプレート文字列

JavaScriptのES6のテンプレート文字列について扱います。テンプレート文字列は、クォートの代わりにバッククォートで囲み、ドル記号と波括弧のプレースホルダーを設置して使います。startsWithなどの文字列メソッドも扱います。

配列のインデックスは0から始まるので1から始まるように１を加えています。コロンに続けて計算式を記述し、それぞれをプレースホルダーで配置しています。

このコードをもっと複雑でreturn文を含んだ複数の処理を行うものとして扱うのがその下の書き方です。こちらは矢印に続けて波括弧{}でブロックを作っています。そのブロックの中で、Date().getFullYear()を使って現在の西暦を取得するメソッドを使って定数を作成しています。さらに、その定数と配列の要素から計算した年齢を処理し、それをreturn文で、テンプレート文字列を使った出力を返します。これをconsolo.log()で表示しています。

これらを実行するとこうなります。