Help us understand the problem. What is going on with this article?

JavaScript初心者にはfunctionよりも、まずアロー関数を教えるべき

JavaScriptの入門書などでは、よくfunction文やfunction式を普通の「関数」として紹介しています。ES5までであれば、それで正しいのですが、ES2015(ES6)以降のJavaScript入門でも同様の説明がなされていることが多いです。

私にはそのことが多くの初心者をJavaScriptの闇に引きずり込んで苦しめているように思えます。

function文は使ってはいけない

ホイスティング

function文で定義された関数は、宣言のホイスティング(巻き上げ)が行われます。

foo(); // ok

function foo() {}

foo(); // ok

これは変数の振る舞いと違っていて、初学者の混乱のもとになります。

foo; // ReferenceError

const foo = 1;

foo; // ok

また、変数と絡むともっとややこしくなり、バグの温床にもなります。

foo(); // ReferenceError

const bar = 1;

function foo() {
   bar;
}

constではない

さらに厄介なことに、function文で宣言された関数はconstではなくletによる定義とみなされます。つまり、後から上書きできてしまうということです。

function foo() {}

foo = 1; // ok

合わせ技

foo = 1;

function foo() {}

foo(); // TypeError

JavaScriptの闇を感じます。

function式は使う必要はない

動的スコープのthis

functionで定義した関数内のthisは動的スコープになります。これは、関数の呼び出しのコンテキスト(文脈)によってthisの参照するものが変わるということです。

しかし、JavaScriptを使う上で動的スコープのthisが必要になるのはオブジェクトのメソッドを定義する時くらいです。

一方、アロー関数はthisが静的スコープで、thisを他の変数と同じように扱えます。

動的スコープは挙動が分かりにくく、きちんと理解した上で気を付けて使わないとバグの原因になります。普通の(メソッド以外の)関数の定義にわざわざfunction式を使って動的スコープのthisを導入するべきではありません。

メソッドの定義

先ほどメソッドの定義においては動的スコープのthisが必要だと述べました。しかし、メソッドの定義において、functionキーワードは、もはや不要です。

オブジェクトリテラルには、メソッドを定義するための糖衣構文があります。

const foo = {
   bar: 1,
   method() {
      return this.bar;
   }
};

また、class構文でも同様のメソッドの書き方ができます。

const Foo = class {
   method() {}
};

アロー関数を使うべき

先述の通り、アロー関数ではthisが静的スコープです。thisは関数の定義時に決まるため、呼び出しのコンテキストによらない振る舞いが保証されます。

また、アロー関数のthisは、他の多くの言語におけるthisと同じように扱うことができます。そういう意味では、functionよりもアロー関数の方が、むしろ他の言語における関数に近いのです。

普通の「関数」としてはアロー関数を使い、function(及びその糖衣構文)で定義した関数は「メソッド」としてのみ使う、という使い分けをするべきです。

その上で、初心者には

  • まず、アロー関数を普通の「関数」として教える
  • オブジェクトの「メソッド」にはfunction(の糖衣構文)を使うように教える
  • 「メソッド」(function)におけるthisの振る舞いが特殊であることを教える

という順番で教えるべきです。まずは教える側がレガシーなJavaScriptの書き方から離れることが重要ではないでしょうか。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away