JavaScript: アロー関数

概略

アロー関数を使うとコールバックなどの function(){...} の記述を簡略にすることができます。

• MDN: アロー関数

// 従来の記述
let result = array.filter( function(value){
   return Number.isFinite(value);
});

// アロー関数で記述
let result = array.filter( value => Number.isFinite(value) );

• TestJS_array_filter_number01.html
  配列から数値を取り出す。Array.filter() のサンプル。
  JavaScript: 配列と連想配列
  JavaScript: 文法などのノート

アロー関数の書き方

• 引数が 1個の場合は () を省略できます。

  ・例: 引数なしの場合。
    () => { 処理 };
  
  ・例 : 引数が 1個の場合は () を省略できます。
    param1 => { 処理 };
  
  ・例 : 引数が 2個以上の場合は () を付けます。
    (param1, param2) = { 処理 };
  

• 処理が 1行の場合は {} を省略できます。 また、戻り値の return は不要です。

  ・例: {} がある場合。
    element => { return parseInt(element); }
  
  ・例: 簡略化
    element => parseInt(element);
  

サンプル

• TestJS_array_map_toText01.html
  Array.map() のサンプル。2重配列をテキストに変換する。
  JavaScript: 配列と連想配列
  

  function matToText(mat, separator){
  	return mat.map( array => array.join(separator) ).join("\n");
  }
  

• TestJS_parse_CSV01.html
  CSV (カンマ区切りのデータ) テキストを 2重配列に分割するサンプル。
  テキストを2重配列に分割する
  

  /** テキストをパースして 2重配列にする。
    空行は途中の行も含めてすべて除去する。
   */
  function parseCSV(text){
      return text.split(/\r\n|\n|\r/).filter( s => s ).map( s => s.split(","));
  }
  

• TestJS_RegExp_replace_template03.html
  文字列を置換するサンプル。String.replace() で %s を含むテンプレート文字列をアロー関数のコールバックで置換する。
  文字列を置換する (2)
  

  function format(template, ...args){
  	let counter = 0;
  	return template.replace(/%s/g, () => args[counter++]);
  }
  

「アロー関数は this を束縛しない」 (2024/01)

ちょっと説明を聞いただけでは何を言ってるのかよく分からない話の 1つです。

要点は、イベント処理などのコールバックを書くときに アロー関数で書いた方が this を気にしなくて済みますよ、 アロー関数以外の方法で書くと状況によっては this を気にする面倒な話 が出てきますよ、という趣旨です。

• JavaScript: this
  

this が指しているオブジェクトが異なる

1) アロー関数内の this と 2) 従来の function(){ ... }内の this で、 this の指すオブジェクトが変わる場合があります。 「this を束縛しない」、「this を束縛する」 といった説明で出てきます。

1) this は obj を指す
  obj.func1( function(){ return this.value1 });

2) this は obj の外側のコンテキストのオブジェクトを指す (obj ではない)
  obj.func1( () => this.value1);

• TestJS_this_class_arrow01.html (2024/01)
  span タグにクリックイベントを付けるサンプル。 プログラムの記述がまずいと関数が見つからないエラーなどが起こします。 this の指しているオブジェクトが プログラムを書いた人の意図とは異なるオブジェクトを指してるため起こります。

function(){ ... } を使ったコールバックの書き方は IE 時代までの古い話なので 2020年代は使わない方が良いです。

関連

• JavaScript はじめの一歩 (3)
• JavaScript: this
• this の指す内容に注意、bind() のサンプル
• JavaScript: 文法などのノート
• JavaScript: 考古学