アロー関数と function で書いた関数の違いは何ですか｜技術面接問題

こう聞かれます

「アロー関数と function で書いた関数の違いは何ですか」
「JavaScript の this は、何を指しますか」
「オブジェクトのメソッドをアロー関数で書くと、何が起きますか」

面接官が見ている点

「短く書ける」で止めず、this の決まり方の違いまで話せるか
function の this は呼び方で変わる、と例で示せるか
コールバックとメソッドで、どちらを選ぶかを理由つきで言えるか

短い答え

function で書いた関数の this は、呼ばれ方で決まり、obj.f() と呼べば obj を指します。
アロー関数は自分の this を持たず、書いた場所の外側の this をそのまま使います。
そのためコールバックにはアロー関数、オブジェクトのメソッドには function の形を使い分けます。

少し詳しい答え

function の this は呼び方で変わる

同じ関数でも、オブジェクトから呼ぶかどうかで this が変わります。

JavaScript

"use strict";
function show() {
  return typeof this;
}
const obj = { show };
console.log(obj.show());
console.log(show());

object
undefined

obj.show() では this が obj になり、単独で呼ぶと undefined です ("use strict" のとき)。メソッドを変数に取り出して呼ぶと this が外れるのは、このためです。

アロー関数は外側の this を使う

メソッドの中で map にアロー関数を渡すと、メソッドの this をそのまま使えます。

JavaScript

const team = {
  name: "A班",
  members: ["Aya", "Ken"],
  list() {
    return this.members.map(
      (m) => `${m}は${this.name}`
    );
  },
};
console.log(team.list());

[ 'AyaはA班', 'KenはA班' ]

ここを function で書くと、map の中では this が team を指さなくなります。

ほかにも、アロー関数は new で呼べず、自分の arguments を持ちません。

作った物と結べると伝わりやすくなります。たとえば「クラスのメソッドから一覧を描くとき、コールバックをアロー関数にして、外側の this を使えるようにした」のように話します。

よくある間違い

「アロー関数は短く書けるだけ」と言う一番の違いは this です。外側の this を使うかどうかで、選ぶ場面が変わります
オブジェクトのメソッドをアロー関数で書く this がそのオブジェクトを指さないので、this.name が読めません
「this は書いた場所で決まる」と、function にも言う function の this は、呼ばれ方で決まります。書いた場所で決まるのはアロー関数です

深掘りの問い

「メソッドを取り出して渡すと this が外れるのを、どう防ぎますか」 bind で this を固定するか、アロー関数で包んで obj.f() の形で呼ぶ、と答えます
「アロー関数に bind や call で this を渡せますか」渡しても this は変わりません。外側の this を使い続けます
「ボタンの addEventListener に渡す関数では、this はどうなりますか」 function で書くと、イベントの付いた要素を指します。アロー関数なら外側の this のままです