【JavaScript】アロー関数を徹底解説

おはようございます。Shotaです。

Javascriptを勉強している人にとって、アロー関数は馴染み深い関数だと思います。Javascriptを勉強している人の中には、

🤔「Javascriptにおけるアロー関数の使い方を知りたい」

🤨「アロー関数がわからない」

このように考えている人も少なくないでしょう。

そこで、今回の記事ではJavascriptに登場するアロー関数について詳細に解説します。

それでは早速、本題に入りましょう。

アロー関数とは

アロー関数とは、Javascriptの関数の一つで、普通の関数に比べて非常に構造がシンプルです。

▼通常の関数

function func(arg) {
    return `output: ${arg}`
}

▼アロー関数

let func = (arg) => `output: ${arg}` 

アロー関数ではfunctionを省略し、代わりに=>を使います。functionが不要なので、よりシンプルに関数を表現できます。

引数がない場合は、()の中身を空白のままにします。ただし、()を省略できないので注意してください。

let func = () => console.log('Hello Javascript')

引数が一つの場合は、()を省略できます。

let func = arg => `output: ${arg}` 

アロー関数のreturnが一行だけなら、{}とreturnを省略できます。

let func = (x, y) => x * y

アロー関数と普通の関数の違い

アロー関数は既存の関数を簡略化するために導入されたので、「書き方が短くなっただけ」と思われがちですが、通常の関数とはまた別の挙動を起こします。

thisの固定化

アロー関数の一番の特徴は、通常の関数と「this」の扱いが異なる点です。

そもそも「this」とは、読み取り専用のグローバル変数のようなものであり、どこからでも参照が可能です。

通常の関数では、呼び出し元のオブジェクトを参照し、また、スコープや状況によって、thisの意味も変化します。しかし、アロー関数では定義された段階でthisが固定化されます。

▼通常の関数

color = 'dark' // グローバル変数としてcolorを用意

let func = function() {
    return this.color
}

console.log(func())

let obj1 = {
    color: 'white',
    func: func
}

let obj2 = {
    color: 'gray',
    func: func
}

console.log(obj1.func())
console.log(obj2.func())

▼実行結果

dark
white
gray

▼アロー関数

color = 'dark'

let func = () => this.color

console.log(func())

let obj1 = {
    color: 'white',
    func: func
}

let obj2 = {
    color: 'gray',
    func: func
}

console.log(obj1.func())
console.log(obj2.func())

▼実行結果

undefined
undefined
undefined

このように、アロー関数では関数が宣言された時点でthisが確定されます。thisの内容を都度変更したい場合は、アロー関数の使用を極力控えたほうがいいかもしれません.

コンストラクタがない

コンストラクタは、関数を使って定義されたオブジェクトです。通常はnewでオブジェクトを生成できます。アロー関数ではコンストラクタを定義できないので注意しましょう。

argumentsを持たない

argumentsは関数内のみで利用できるオブジェクトです。

通常は配列のようにarguments[i]という形で関数に渡された値をすべて取得できます。

▼通常の関数

let func = function(a, b, c) {
    for (let i = 0; i < arguments.length; ++i) {
        console.log(arguments[i])
    }
}

func(1, 2, 3)

▼実行結果

1
2
3

しかし、このargumentsはアロー関数では使えないので十分に注意してください。

まとめ

今回の記事では、Javascriptで汎用性の高いアロー関数について詳細に解説しました。

今回の記事を参考に、アロー関数についての理解を深めていただければ幸いです。

今回の記事はこれで終了です。

【参考サイト】

tcd-theme.com

ja.javascript.info