学び直しのJS ~ アロー関数編 ~

学び直しシリーズ第二弾！
今回はアロー関数です。

ES6をちゃんと勉強せずVueの勉強をはじめてしまったせいで、importや() => {}の意味がわからなくて挫折したことがあります。
VueやReactなどのモダンな技術に触れようとする心意気は非常に大事だと思うのですが、同じような経験をしてほしくないのでこの記事でざっくりとイメージを掴んでもらえたらなと思います！

アロー関数

解説に入る前にまずは従来の方法と見比べてみます。

// 従来の書き方
function square(x, y) {
  return x * y;
}

// アロー関数
const square = (x, y) => {
  return x * y;
};

特徴１

アロー関数は 無名関数(匿名関数) と同じように、関数を定義した段階では関数名が定まっていません。

特徴2

アロー関数の処理が１行の場合は{}とreturnを省略することができます。

// アロー関数
const square = (x, y) => x * y;

特徴3

アロー関数内でthisを用いるとグローバルオブジェクトが参照される。
Web制作をしている方はここを理解しておかないとイベントの時の処理がうまくいかないことになります。

<button id="btn">Click Me</button>
<script>
  const btn = document.getElementById("btn");

  btn.addEventListener("click", function () {
    console.log(this);
  });

  btn.addEventListener("click", () => {
    console.log(this);
  });
</script>

アロー関数ではない無名関数の方のthisにはクリックしたbuttonのDOMを参照しています。
一方、アロー関数で書いた方のthisはグローバルオブジェクト、つまり、Windowオブジェクトを参照するので注意が必要です。

まだJavaScriptにそんなに慣れていない方は特徴1と特徴2を理解できればOKです！