最終更新日 2024-09-25

～文法メモ～ アロー関数

C#などでもいち早く導入されたアロー関数

要するに「非常に短い関数」で、「その関数自体を引数とする」ようなシーンを中心に、
「もっと短い書き方が出来てた方が見やすい」ということで導入された機能です。

var a = [
  "山田太郎",
  "うさぎ",
  "東京特許許可局"
];

let a2 = a.map(function(s){ return s.length });
hm.debuginfo(a2); // [4,3,7]

let a3 = a.map( (s) => s.length );
hm.debuginfo(a3); // [4,3,7]

関数自身のthis問題の解決

通常の関数ですと、それぞれの関数は「自身のthis」を自動的に定義してしまいます。

function Person() {
  // Person() のコンストラクタは、自身のインスタンスを `this` として定義します。
  this.age = 0;

  setInterval(function growUp() {
    // 非 strict モードでは、growUp() 関数は `this` をグローバルオブジェクトとして定義します。
    // これは、 Person() コンストラクタで定義された `this` とは異なります。
    this.age++;
  }, 1000);
var p = new Person();

この問題は this の値をスコープ内の変数(大抵はself)に別途割り当てることにより、各人でマニュアルで対策していました

シンボル名で値を共有したい場合は、Symbol.for(...)で作成

function Person() {
  var self = this; // `self` の代わりに `that` を選ぶこともあります。
                   // どちらかに統一するようにしましょう。
  self.age = 0;

  setInterval(function growUp() {
    // このコールバックは、期待されるオブジェクトの値を
    // `self` 変数で参照します。
    self.age++;
  }, 1000);
}

アロー関数は、外側のスコープのthisをそのまま補足するため、以下のコードは期待通りに動作します。

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| は person オブジェクトを適切に参照します。
  }, 1000);
}

var p = new Person();