関数式

関数式は、式が想定される場所で作成される関数です。関数式は変数に代入された値としてよく見られます。関数宣言には常に名前が必要ですが、関数式を使用して匿名関数を作成できます。その場合、識別子を省略し、function キーワードの後に省略可能なパラメータを含むかっこのペアを指定します。

const myVariable = function() { };

変数の識別子を使用して、これらの関数式を呼び出すことができます。

const myVariable = function() {
    console.log( "This is my function." );
};

myVariable();
> "This is my function."

関数式を使用すると、関数宣言に似た構文を使用して名前付き関数を作成することもできます。

const myVariable = function myFunction() {
    console.log( "This is my function." );
};

myVariable();
> "This is my function."

ただし、関数宣言とは異なり、名前付き関数式には関数自体内からのみ関数名でアクセスできます。

const myVariable = function myFunction() {
  console.log( `I'm a ${ typeof myFunction }.`);
};

typeof myFunction;
> "undefined"

typeof myVariable;
> "function"

myVariable();
> "I'm a function."

関数式に関連付けられた名前は、主にデバッグに役立ちます。名前付き関数式は再帰的に呼び出すこともできますが、最新の開発ではあまり一般的ではありません。

const myVariable = function myFunction() {
    console.log( "One second elapsed." );
    setTimeout( myFunction, 1000 );
};

setTimeout( myVariable, 1000 );
> "One second elapsed."
> "One second elapsed."
> "One second elapsed."
…

アロー関数の式

アロー関数式（アロー関数またはラムダ関数と呼ばれることもあります）は、固有の動作を持つ匿名関数式を作成するための簡潔な構文を提供するため、ES6 で導入されました。

アロー関数は、式が想定される場所（変数に代入される値など）に作成できます。アロー関数は最も一般的な形式で、0 個以上のパラメータを含む一致したかっこのペア、1 つの等号と大なり記号で構成される矢印（=>）、関数本体を含む対応する中かっこのペアで構成されます。

const myFunction = () => {};

特定の条件下では、構文をさらにコンパクトにできます。パラメータを 1 つだけ使用する場合は、開始かっこを省略できます。

const myFunction = myParameter => {};

関数本体で単一の式の値を返す場合、関数本体を中かっこで囲むことも、return キーワードを使用する必要もありません。

const myFunction = () => 2 + 2

myFunction()
> 4

アロー関数は、arguments 値または this 値に対して独自のコンテキストを持たない点で一意です。代わりに、アロー関数の語彙を含む環境（これらのコンテキストを提供する最も近い包含関数）から両方の値を継承します。

function myParentFunction() {
    this.myProperty = true;
    let myFunction = () => {
            console.log( this );
    }
    myFunction();
};

let myInstance = new myParentFunction();
> Object { myProperty: true }

アロー関数を呼び出す

アロー関数は、他の型の関数と同じように引数をバインドしません。アロー関数の本体にある arguments オブジェクトは、アロー関数の最も近い語彙を含む環境からその値を継承します。

function myFunction() {
    let myArrowFunction = () => {
            console.log( arguments[ 0 ] );
    }
    myArrowFunction( true );
};

myFunction( false );
> false

この例では、引数 false を使用して呼び出される外部関数が、引数 true を使用して内部アロー関数を呼び出します。アロー関数内の arguments オブジェクトは外側の関数のバインディングに解決されるため、内側の関数は外側の関数の false をログに記録します。

親コンテキストから継承する arguments オブジェクトがない場合、アロー関数の arguments オブジェクトが定義されておらず、アクセスしようとするとエラーが発生します。

let myArrowFunction = () => {
    console.log(arguments);
};
myArrowFunction( true );
> Uncaught ReferenceError: arguments is not defined

即時に呼び出される関数の式（IIFE）

即時呼び出し関数式（IIFE）は「自己実行型匿名関数」とも呼ばれ、定義するとすぐに呼び出される関数式です。IIFE では、関数をグループ化演算子で囲んで作成された関数式を使用します。次に、2 番目の一致するかっこのペアが、関数定義自体の直後、またはグループ化演算子の直後で関数を呼び出します。標準関数を使用する場合、2 つの方法に実質的な違いはありません。

(function() {
    console.log( "IIFE.")
    }
)();
> "IIFE."

(function() {
    console.log( "IIFE.")
    }
());
> "IIFE."

最初の例では、グループ化された関数式を呼び出します。2 番目の例では、グループ化演算子内で関数宣言を呼び出し、最終結果をグループ化式として評価しています。どちらの場合も結果は同じです。

ただし、IIFE がアロー関数の場合は違いがあります。この場合、アロー関数自体は式ではありませんが、式が想定されるコンテキストで作成する必要があるため、関数を呼び出すために使用されるかっこはグループ化演算子の外部に配置する必要があります。グループ化演算子のスコープ内からアロー関数を呼び出そうとすると、式のコンテキストでまだ作成されていないアロー関数を呼び出すことになります。

( () => {
    console.log( "IIFE." );
}() );
> Uncaught SyntaxError: missing ) in parenthetical

グループ化演算子は式を想定しているため、その中のアロー関数が定義され、その後のかっこでグループ化された式を呼び出すことができます。

( () => {
    console.log( "IIFE." );
} )();
> "IIFE."

以前のアプリケーション。IIFE を頻繁に使用してスコープを管理することで、関数スコープの変数と関数宣言によるグローバルスコープの汚染を防ぎます。ES6 にブロックスコープが導入される前は、グローバルスコープの偶発的な汚染を防ぐため、スクリプト全体を IIFE にラップすることが一般的でした。

理解度をチェックする

関数の外で名前付き関数の式を名前で呼び出すことはできますか。

はい