【JavaScript】アロー関数について徹底解説!

JavaScript

アロー関数とは

矢印(=>)を使って、今まで書いていたfunction関数よりも短い記述で同様の関数を定義できるJavascriptの最新のメソッド定義方法です。

アロー関数の定義の仕方
リンクをコピーしました

今まではJavaScriptで関数を定義するときは以下のようにして定義していたと思います。

javascript
1
2
3
4
5
beforeFunction = function helloworld() {
  console.log('helloworld')
}

beforeFunction()

ただアロー関数を使うと以下のように短く定義することも可能です。

javascript
1
2
3
4
5
let afterFunction = () => {
   console.log('after_hello_world') 
}

afterFunction()

さらに引数が一つだけの場合は

javascript
1
2
let afterFunction = hello => console.log(hello);
let afterFunction = y => console.log(y);

関数の中身が一文の場合は{}も省略することが出来ます。
functionという古い書き方は無駄に文字数を取ってしまうので、最新のversionのアロー関数では、短い書き方で出来ます。
functionに慣れていた方はアロー関数に移行していきましょう。

今パソコンでこのサイトを見ている方は 「Ctrl + Shift + I(Windows)」、「Command + Option + I(Mac)」と同時にボタンを押してみましょう。
するとパソコンのコンソールという画面が開けてそこで、上に書いたアロー関数をすぐに実践できます!
よく分からないという人は下に動画も載せているんで、この動画と一緒に打っていきましょう。

実際に打って動作をみると、読んでるだけじゃ分からくても分かるようになることが多いので、ぜひ実践してみてください!

アロー関数
今説明したのはアロー関数の基礎的な内容ですが次回ではアロー関数の応用的な使い方を解説します。

まとめ

アロー関数という言葉が出てきたら最新のJavaScriptのメソッドの定義法で短くメソッドを記述できるものなのだなと思ってください。