javascript -part3-　アロー関数とコールバック関数

Contents

1. アロー関数
2. コールバック関数
3. 参照

アロー関数

const timeout = setTimeout(() =>{
    updateTimer();
  }, 10);

タイピングのコードで、アロー関数式があったから見ていく。
(() =>{updateTimer();}, 10)
気になるのはここの部分。アロー関数は通常のfunctionの代替構文で、関数の短縮形のこと。
アロー関数を使う理由は、関数を短く書きたいことと、thisを束縛したくないということらしい。

「thisを束縛しない」ということが分からない。どういうことか。翻訳の問題かもしれないが、thisをアロー関数自身が「持っていない」ということを表しているようだ。

アロー関数自身は this を持ちません。レキシカルスコープの this 値を使います。つまり、アロー関数内の this 値は通常の変数検索ルールに従います。このためスコープに this 値がない場合、その一つ外側のスコープで this 値を探します。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions(最終閲覧2020/04/23)

つまり、スコープ内にthisがあっても、this値が無いなら、外側の方でthis値を探すので値はそちらと同じになる。ちなみに、レキシカルスコープは、関数を定義した時点でスコープが決まるというもの。以下のようなイメージ。

var x = 10; //スコープ関係無し
function A(){
  console.log(x);  //レキシカルスコープはx=10
}
function B(){
  var x = 1000;  //ここでもxが定義されている
  A();  //この時のxは10?1000?
}
A();  //10
B(); //-> 10 (1000ではない!)

varで定義された変数はスコープ内外で利用できる。functionAでxはvar x で定義された10が入る。functionBでもxが定義されているが、この場合xはグローバルスコープになっているので、functionBのは10になるようだ。

コールバック関数

上記のアロー関数の最初に出てきたコードの形は、「無名関数＋アロー関数」の形。コールバック関数ってまだ良く分かってないんだが、他の関数の引数に使う関数のことを指す。例を見てみる。
cf , Callback function (コールバック関数)

function greeting(name) {
  alert('Hello ' + name);
}

function processUserInput(callback) {
  var name = prompt('Please enter your name.');
  callback(name);
}

processUserInput(greeting);

ここではgreeting関数が、processUserInput関数の引数に使われていることが分かる。greetingがここでのコールバック関数である。なので、’Hello ' と’Please enter your name.’を合わせた文字列が出力されると思う。
まだまだ勉強しないとなあ。