JavaScriptのアロー関数

プログラムはできるだけシンプルに分かりやすく記述することで、バグや認識違いを少なくすることができます。

JavaScriptのアロー関数は、プログラムをシンプルに記述することができる手法の1つです。

本記事では、JavaScriptのアロー関数について解説します。

記事内に記載しているプログラムは、Node.js14.14.0を使って動作確認をしています。

JavaScriptのアロー関数

JavaScriptのアロー関数について、以下の内容を解説します。

アロー関数とは

アロー関数は、ES6（ES2015）で導入された、function式の代替構文です。

例えばこれまで以下のように記述していたfunction式

const func1 = function(a, b) {
    return a + b;
};
console.log(func1(1, 2)); // -> 3

が、アロー関数を使用すると

const arrow1 = (a, b) => {
    return a + b;
};
console.log(arrow1(1, 2)); // -> 3

となります。

=> を使って、(引数,…) => {関数式}; と表すことができます。

アロー関数のメリット

アロー関数を使うメリットとしては、導入する理由となった以下の2つがあげられます。

関数を短く書くことができる

関数式が1文である場合は、{} を省略することができます。
return文も式の結果をそのまま返すので、省略できます。

const arrow2 = (a, b) => a + b;
console.log(arrow2(1, 2)); // -> 3

引数が1つである場合には、 () を省略することができます。

const arrow3 = a => a * 2;
console.log(arrow3(2)); // -> 4

引数がない場合は、逆に () は省略できません。

thisが指すものを確定できる

他のドキュメントなどでは「thisを束縛する」と表したりします。
この束縛とは、thisが表すスコープ（thisが何を指すのか）のことなのですが、通常関数とアロー関数では以下の違いがあります。

s = "global string";
this.s = "this string";
const func2 = function() {
    console.log(s); // ->  global string
    console.log(this.s); // -> global string
};
const arrow4 = () => {
    console.log(s); // -> global string
    console.log(this.s); // -> this string
}

func2();
arrow4();

通常関数では、自身のインスタンスをthisとして定義するため、this.s を参照しても外側に定義されているthisとは異なるため、”global string”を参照します。

一方でアロー関数では、宣言した時点でthisを確定（束縛）し、レキシカルスコープのthisを参照するため、”this string”を参照します。

アロー関数の注意点

アロー関数は、通常関数とは異なる部分でいくつかの注意点があります。

newすることができない

通常関数は new することができますが、アロー関数は new することはできません。（コンストラクタになることができません）

const func3 = function(a, b) {
    return a + b;
};
const arrow5 = (a, b) => a + b;

new func3();
new arrow5(); // -> TypeError: arrow5 is not a constructor

prototypeプロパティがない

アロー関数のprototypeプロパティはundefinedです。

const func4 = function(a, b) {
    return a + b;
};
const arrow6 = (a, b) => a + b;

console.log(func4.prototype); // -> {}
console.log(arrow6.prototype); // -> undefined

argumentsがない

引数リストを取得できるargumentsですが、アロー関数では期待した結果を得ることができません。
可変長引数を利用することで、取得することは可能です。

const arguments = "arguments";
const func5 = function(a, b) {
    console.log(arguments); // -> [Arguments] { '0': 1, '1': 2 }
};
const arrow7 = (a, b) => console.log(arguments); // -> arguments
const arrow8 = (...arguments) => console.log(arguments); // -> [ 1, 2 ]

func5(1, 2);
arrow7(1, 2);
arrow8(1, 2);

引数とアローの間に改行は入れられない

const arrow9 = (a, b)
 => a + b;

console.log(arrow9(1, 2)); // -> SyntaxError: Unexpected token '=>'

まとめ

アロー関数についてまとめると以下のようになります。

今回はJavaScriptのアロー関数を解説しました。

以上、参考になれば幸いです。