【JavaScript】アロー関数を使ってみた

アロー関数を使ってみた

アロー関数というのは => で関数を組むことが出来るという書き方です。
今までは、この書き方をするメリットがよくわからなかったので使っていませんでしたが、Promiseを使うときはこっちの書き方が良いという噂を耳にしたので、使ってみることにしました。

//とりあえず書いた
var func = (str) => {
    console.log(str);
};
func('arrow function');

実行結果

2015年から登場した新しい書き方なだけあって、今までの言語にない新しい感じがします。

書き方が違うだけで今まで使っていたfunctionと同じ動きをするものだと思っていましたが、thisを使うときに挙動が変わります。

アロー関数では宣言時にthisを束縛します。
今までの関数であれば、

function printf(){
    console.log(this.str);
  };
  
  var obj1 = {
    "str": 'obj1',
    "func": printf
  }
  var obj2 = {
    "str": 'obj2',
    "func": printf
  }
  
  obj1.func();
  obj2.func();

実行結果

このように関数が実行された場所のスコープのthisを使ってくれていました。

しかし、アロー関数ではそうなりません。

var printf = () => {
    console.log(this.str);
  };
  
  var obj1 = {
    "str": 'obj1',
    "func": printf
  }
  var obj2 = {
    "str": 'obj2',
    "func": printf
  }
  
  obj1.func();
  obj2.func();

実行結果

両方ともnullになります。
アロー関数は、関数を使ったスコープではなく、関数を作ったスコープのthisで固定されるみたいです。
なので、アロー関数を使うときはthisの使い方に注意が必要です。

アロー関数の使いどころ

Promiseではアロー関数が良いという噂を聞いて使ってみたわけですが、個人的には見やすくなる以外にPromiseで使うメリットがよくわかりませんでした。
bindやselfを使う場面では有効だと思いますが、具体的にどんな瞬間で使うのか、パッと思いつきませんでした。

ただ、普通の関数に比べてアロー関数の方が厳格な書き方になるので、予想外のバグとかは確実に減るんだと思います。
JavaScriptは結構ふわふわした感じがあるので、C/C＋＋とかから来る人にとってはこういう書き方の方がありがたい気がします。

僕が感じたメリットはそんなところです。この先ゲームを作っていく中で徐々にアロー関数のメリットに気づいていくんだと思います。
ガリガリ書いていいコードが書けるようになりたいです。