はじめに

こんにちは！
スタイル・エッジLABOのSKです。
皆さんは普段JavaScriptを書く際、アロー関数は使っていますでしょうか。
時間があるときに使ってみよう...とずっとfunction定義を使い続けている人はいないでしょうか？

かく言う私もそうでしたので、今回はアロー関数についてまとめてみました。

アロー関数とは？

アロー関数とは、下記のような、より短く記述できる、通常の function 式の代替構文のことです。
"function"を"=>（アロー）"に置き換えたようなイメージです。

// 通常
const hoge = function (arg1, arg2, arg3, ...) {
      console.log(arg1);
};

// アロー関数
const hoge = (arg1, arg2, arg3, ...) => {
      console.log(arg1);
};

基本的な構文

(引数,...) => {関数の内容}

基本的な形は上記のような書き方になるのですが、
アロー関数がすごいのはここからさらに省力した形で書ける点になります。

・引数が1つの場合

引数が1つの時はカッコを省略することができます。

const hoge = arg => {
      console.log(arg);
};

※ 引数が0個の場合は、カッコは必要です。

const hoge = () => { 
      console.log("Hello"); 
};

・関数の中身が1文のみの場合

関数の中身が1文のみの時は、中括弧{}を省略することができます。

const hoge = (arg1,...) => console.log(arg1);

また、この1文の戻り値がそのまま関数の戻り値とみなされるので、returnも省略可能です。

下記2つの式は同等です。
const hoge = (arg1, arg2) => { return arg1 + arg2 }; 
const fuge = (arg1, arg2) => arg1 + arg2;

上記2つを組み合わせると、場合によっては、下記のように超省略形で書くことが可能です✨

// アロー関数
const hoge = arg => arg;

// 通常
const hoge = function (arg) {
      return arg ;
};

アロー関数を使用する際の注意点

・thisは宣言時に定義される

thisの値は、function定義関数ですと、主にその関数を呼び出すときに決定されていましたが、
アロー関数の場合は、関数を定義した時点で決定されます。
値としては、関数の外のthis（レキシカルスコープのthis）を参照し、固定します。

hoge = "This is global !";

const obj = {
    hoge: "local",
    func: function () {
        console.log(hoge);
    },
    arrowFunc: () => {
        console.log(hoge);
    }
}

obj.func();　           // => "local"
obj.arrowFunc();　// => "This is global !"