表で見るJavaScriptの4つの関数定義

はじめに

JavaScriptにいくつかある関数の定義方法を機能の有無を基準に表でまとめてみました。

表

機能

	式リテラル	文宣言	関数呼び出し	new呼び出し	generator 宣言	async 宣言	argumentsの使用	thisの束縛
function name() {}	yes	yes1	yes	yes	yes	yes	yes	yes
class Name() {}	yes	yes1	no	yes	no	no	yes	no2
method() {}	no	yes	yes	no	yes	yes	yes	yes
() => {}	yes	no	yes	no	no	yes	no	no

宣言

	再宣言	宣言への再代入	宣言の巻き上げ	宣言のスコープ
function name() {}	yes	yes	yes	関数
class Name() {}	no	yes	no	ブロック
method() {}	yes3	/	/	/
() => {}	/	/	/	/

補足

• 引数の宣言部分の構文は私が知る限りではどれも同じです

• Functionなど関数コンストラクタによる定義はコンストラクタを使わずに書いた場合と変わらないはずなので記載していません

• 対応する表現がない場合は/で埋めてあります

• 宣言への再代入というのは、見かけることはないと思いますがこういうやつです。
  というかあっては駄目ですこんなコード

    class SomethingClass {}
    
    SomethingClass = 0;
    
    console.log(SomethingClass); // 0
    
    function somethingFunction() {}
    
    somethingFunction = 1;
    
    console.log(somethingFunction); // 1
  

感想

こうして見るとfunctionの何でも感はすごいですね。一方でアロー関数はかなり純粋な関数定義のようです。あと個人的にargumentsはfunctionだけのものかと思っていたのでアロー関数以外の全てで使えるのは意外でした。また、仕様を読んだわけではないですが、functionはvar、classはlet相当で宣言されていそうです。

1. 文による宣言は名前が必須です。ただし例外としてexport default function () {}やexport default class {}のような無名宣言もあるようです。これらは式ではなく文として解釈されます ↩ ↩²

2. bind/call/applyなどでthisの束縛はできませんが、thisを参照すると自分自身のインスタンスになっています ↩

3. class宣言内での再宣言です ↩