JavaScriptのアロー関数【=>】の使い方をご紹介！

【JavaScript】アロー関数を使い方をご紹介！使いこなせれば便利でかっこいい！？

はじめに

こんにちは、かずん(@kazoonLab)です。

ES6(ES2015)にて、JavaScriptにアロー関数が追加されました。

以前に紹介したletとconstと同じタイミングでの実装です。今回の記事は、アロー関数とは何か、どのように使うかをご紹介します！

この記事を読むと、関数を宣言する方法とアロー関数の使い方についてわかるよ！

はじめに
「無名関数」とは
- 関数宣言
- 関数式
アロー関数とは
まとめ

「無名関数」とは

アロー関数の説明をする前に、まず「無名関数」¹について説明します。

関数宣言

ES6以前は、関数は名前付きで宣言しました。下記のコードを参照ください。

// fooという名前で、関数を宣言
function foo () {
  console.log('Foo')
}

// foo関数を実行
foo();  // --> 'Foo'

上のコードでは、関数にfooという名前を付けて宣言しています。

宣言された関数fooは、foo()という形で呼び出すことができます。

このような形で関数を定義することを、関数宣言(function declaration)といいます。

関数宣言には、以下の問題点があります。どちらも、varで変数宣言する場合と似ていますね。

- 巻き戻しが発生する - 上書きできてしまう

このような問題を解消するため、「関数式」という手法があります。見てみましょう。

関数式

関数式とは、通常の変数宣言と同様に、変数に関数を代入することです。下のコードを見てみましょう。

// 名前のない関数を、変数barに代入
const bar = function () {
  console.log('Bar');
}

// bar関数を実行
bar();

上のコードで、functionと()の間に名前がないことにお気づきでしょうか。

変数barには名前のない、「コンソールに'Bar'を表示する」関数が代入されています。この名前のない関数こそが、上で登場した「無名関数」です。

変数に入れられるということは、letやconstを使うことができます。これによって、上述の問題は解消できそうです。

アロー関数とは

ところで、今までの関数の形はいわゆるブロック({}で囲まれている)でした。これをもっと短く書けるようにしたのが、今回のテーマである「アロー関数」です。

先程のbar関数をアロー関数で書くと、以下のようになります。

const bar = () => {
  console.log('Bar');
}
// 呼び出し方は同じ

()の後の=>(arrow, やじるし)から、アロー関数と呼ばれています。おおまかな挙動はfunction()で書いたものと同じです。²

ブロックの中身が一行なら、短縮して書くこともできます。

const bar = () => console.log('Bar');

関数の引数が一つなら、引数の()を外して書くこともできます。

const baz = (str) => console.log(str);
baz('Baz');  // --> Baz

function()では書かなければいけなかったreturnも、

const addition = function (a, b) {
  return a + b;
}
addition(1 + 2);  // --> 3

アロー関数なら省略できます。

const additionArrow = (a, b) => a + b;
additionArrow(4, 5);  // --> 9

このように、アロー関数を使うことで、さらにソースコードを読みやすくさせることができます。

まとめ

今回は、ES6で実装されたアロー関数についてご紹介しました。

使いこなせると、単純で見やすいコードを書けるようになります。ぜひ使ってみてください。

次回の記事では、アロー関数が実際に使われる例の1つ、「Arrayの反復処理」についてご紹介します。

最後までご覧いただきありがとうございます。

この記事がいいなっと思ったら読者登録をお願いいたします♪

【ツイッターでは主に、仕事や技術系の内容をつぶやいています】技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)