【JavaScript】アロー関数を使ってみる

ES2015で追加された機能でアロー関数というものがあります。JavaScript内で記述する関数(function)が非常にシンプルにかける記法です。
最近のシステムではアロー関数で記述していることが多いです。

また、InternetExplore11が2022/6/15をもってサポートが打ち切られました。

アロー関数はIE11には対応しておらず、本当はアロー関数を使いたいのにIEもサポートしなければいけないのでアロー関数を書かずに従来のfunctionで記述していたシステムもありました。今回のIEサポート打ち切りでアロー関数は、もっと記述されるケースが増えると思います。

今回はそんなアロー関数の書き方についてまとめてみました。

アロー関数とは?

アロー関数とはES2015から追加された記法でJavaScript内で記述する関数(function)の定義をシンプルに書くことができる記法です。

=>の矢印記号を使って関数を記述することが名前の由来です。

アロー関数を使ってみる

従来の関数との違い

例えば、引数として受け取った数値の2乗した数値を返す関数を従来の関数で定義すると以下のように記述します。

//従来の関数定義
const func1 = function(num){
    return num ** 2;
};
console.log(func1(10));

[Running] node "c:\javascript\main.js"
100

[Done] exited with code=0 in 0.16 seconds

これをアロー関数で書くとこうなります。

//アロー関数で書く
const func1 = (num) => {
    return num ** 2;
};
console.log(func1(10));

[Running] node "c:\javascript\main.js"
100

[Done] exited with code=0 in 0.144 seconds

functionという宣言がなくなって、(引数)=>{処理内容}で関数が定義されています。

引数が一つの場合は括弧を省略できる

また、今回のように引数が1つのみの場合は、()を省略して以下のように書くこともできます。
引数が二つ以上の場合に()を省略するとエラーになります。

//アロー関数(引数がひとつなので括弧を省略)
const func1 = num => {
    return num ** 2;
};
console.log(func1(10));

[Running] node "c:\javascript\main.js"
100

[Done] exited with code=0 in 0.135 seconds

引数が複数ある場合は必ず括弧が必要

引数が複数ある場合は、括弧を省略することはできません。以下は引数に渡された2つの数値の掛け算をした関数です。

//アロー関数(引数が複数)括弧をつけているのでエラーにならない
const func1 = (num1, num2) => {
    return num1 * num2;
};
console.log(func1(2,3));

[Running] node "c:\javascript\main.js"
6

[Done] exited with code=0 in 0.143 seconds

//アロー関数(引数が複数の場合は括弧を省略するとエラー)
const func1 = num1, num2 => {
    return num1 * num2;
};
console.log(func1(2,3));

[Running] node "c:\javascript\main.js"
c:\javascript\main.js:2
const func1 = num1, num2 => {
                    ^^^^

SyntaxError: Missing initializer in const declaration
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at node:internal/main/run_main_module:17:47

[Done] exited with code=1 in 0.207 seconds

処理結果を1行で返す場合は{}波括弧とreturnを省略できる

関数にはその関数が処理した結果を返すreturnを記述する必要がありますが、returnを１行で返す場合はreturnと{}波括弧を省略することができます。これは、省略できることを知らないとこのコードは何をしているのかさっぱりわからないので知っておいたほうがいいと思います。

//アロー関数(returnを省略)
const func1 = (num1, num2) => num1 * num2;
console.log(func1(2,3));

[Running] node "c:\javascript\main.js"
6

[Done] exited with code=0 in 0.206 seconds

変数がfunc1にしているので、かろうじて関数かもとわかりますが、ルールを知らなかったらわからないですよね!!! ただ、１行でかけるのでコードはすっきりします。

上述では処理結果を１行返す場合はreturnを省略できると書いていますが、処理結果を()括弧で囲んで1行とみなして省略させることも可能です。

const func1 = (num1, num2,num3,num4) => (num1 * num2 *
    num3 * num4 );
console.log(func1(2,3,4,5));

[Running] node "c:\javascript\main.js"
120

[Done] exited with code=0 in 0.207 seconds

まとめ

ここでは、従来の関数とアロー関数との違いをメインに説明しましたが、その他にもアロー関数を使うことによってthis の値を語彙的に束縛という従来のJavaScriptとは違う動きをするという特殊なパターンもあったりします。この動きの違いは私もいまいち理解できていないので理解ができたら別記事で求められればと思います。