JavaScriptのアロー関数の使い方！メリットもまとめ！

けど、そんな中で悩むことは、

ですよね。

今回はそんなお悩みを解決する

についてまとめます！

JavaScriptのアロー関数について

JavaScriptのアロー関数について説明をします。

JavaScriptのアロー関数とは

JavaScriptのアロー関数とは、ES6から導入された関数で、従来Functionを使用した関数式を簡略化したものです。
=>の部分が矢に似ていることからアロー関数と呼ばれるようになりました。

アロー関数の構文

アロー関数の構文は以下の通りです。

またアロー関数の結果を直接変数に渡す場合は以下の構文となります。

サンプルコードを実行してみましょう。

まずは従来型のfunctionを使用した関数式です。

function value(num){
	return num * 2;
}
console.log(value(4));

結果です。

次はアロー関数にしてみましょう。

const value = (num) =>{
	return num * 2;
}
console.log(value(4));

結果です。

なお、引数を渡さない場合は関数の定義そのものが表示されます。

const value = (num) =>{
	return num * 2;
}
console.log(value);

タカヒロ

functionがない分数式がすっきりしましたね。

結果です。

タカヒロ

アロー関数など関数を使う場合は引数を必ず指定するようにしましょう。

なお、引数を空にしてみると、NaNの結果となります。

const value = (num) =>{
	return num * 2;
}
console.log(value());

結果です。

JavaScriptのアロー関数を使うメリット

コードを短くできる

JavaScriptはブラウザから読み込まれるライブラリなので、少しでもコードを短く、省略したい気持ちがあります。

アロー関数はfunctionの記述が不要となるため、その分コードも短くすることができます。

先ほどのサンプルコードをさらに短くしたコードです。

const value = (num) => num * 2;
console.log(value(10));

結果です。

thisの値は関数定義時に決められる

次のメリットはthisの値は関数定義時に決められるという点です。

thisとはスクリプト内のどこからでも利用できる特別な変数のことです。

なにも宣言をしないと、object Window「JavaScriptのオブジェクト階層最上位に位置するオブジェクト」をがっつりもってきてしまいます。

宣言をすることで中身が変化をさせていくことができます。

サンプルコードで見てみましょう。

const objTest = {
    name: '名前です',
    show: function() {
        const show = () => {
            console.log(this.name);
        };
        show();
    }
};
objTest.show();

結果です。

objTestオブジェクトをThisとして受け取り、そのnameの値を表示させていることがわかりますね。

アロー関数を入れる場所によってThisを確定することができるというわけです。

さいごに

いかがでしょうか。

今回は、

についてまとめました。

また、他にも便利な方法がありますので、よろしければご参照頂ければと思います。