UPDATE：2023.10.20
- CATEGORY
【JavaScript】アロー関数式について
Contents
JavaScriptの「アロー関数式」を備忘録的な形で紹介します。
アロー関数式
アロー関数式はES6から使用できるようになった構文です。
従来の関数式を簡略化して使用することができます。
アロー関数式
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Description
使用方法
従来の無名関数
アロー関数式
a => a + 10;とても簡略化されていますね。
アロー関数の特徴
・引数が一つの場合は()を省略することができる。
例
従来の無名関数
(function (a) {
return a + 10;
});アロー関数式
a => a + 10;ただし引数が複数の場合は()が必須となります。
×これは間違い
a, b => a + b + 10;〇引数が複数の場合は()が必要
(a, b) => a + b + 10;ちなみに上記関数の従来の記述はこうです。
従来の無名関数
(function (a, b) {
return a + b + 10;
});アロー関数を使用するメリット
①関数を短く書くことができる
②関数定義時にthisが決まる
②関数定義時にthisが決まる
①については前述の説明で理解できたかと思います。
②については理解が難しいところなので、私自身も勉強しなおしつつ説明を書いていこうと思います。
そもそも、JavaScriptのthisとは何なのでしょうか？
とても簡単に説明すると、thisは『呼び出した場所や方法によって中身が変わる変数』です。
なので、thisが何なのかはその都度変わります。
（今回はアロー関数とそれ以外の関数（メソッド含む※）でのthisの話をします）
※メソッドは関数を値に持つプロパティ
アロー関数のthis
⇒関数定義時に決める事ができるそれ以外の関数（メソッド含む）のthis
⇒関数を実行するときに決まるアロー関数以外のthisの「関数を実行するときに決まる」は若干問題があり、
実行した時にthisが決まるので予期せぬ挙動を返すこともあります。
（ただしこれが必要な場合もあります）
アロー関数は「関数定義時に決める事ができる」ので、実行するまでthisが何かわからない問題を回避できます。
アロー関数がどのthisを参照するかは
・外側の関数スコープから見た「this」を参照
・関数スコープの中にいなければ、windowオブジェクトを指す
これなら関数実行時に決まるよりも、thisの中身が想像しやすいですね◎・関数スコープの中にいなければ、windowオブジェクトを指す
参考
アロー関数が便利な理由と使いどころ関数とスコープ
JavaScript、アロー関数のthisについて。
(function (a) {return a + 10;
});