関数式

関数式は関数式が想定される場所に作成されます。関数式は、変数に代入される値としてよく使用されます。関数宣言は、には名前が必要です。関数式を使用して匿名 ID を作成できます。 ID を省略し、function キーワードの後にオプションのパラメータを含むかっこのペア:

const myVariable = function() { };

それらのユーザーに電話して関数式を変数 ID で表します。

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 で導入され、独自の動作を持つ匿名関数式です。

式がある場所にアロー関数を作成できます。たとえば、値として変数に代入されます。最も一般的な形式では、ゼロ個以上の値を含む一組のかっこで構成され、 1 つの等号と大なり記号で構成される矢印（=>）、関数本体を含む一致した中かっこのペア:

const myFunction = () => {};

特定の条件下では、構文をさらにコンパクトにすることができます。もし使用する場合は、最初のかっこを省略できます。

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 }

アロー関数を呼び出す

Arrow 関数は、引数を他の種類の関数も使用できます。矢印関数本体の arguments オブジェクトは、その矢印関数の最も近い字句的包含環境から値を継承します。

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

myFunction( false );
> false

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

親コンテキストから継承する arguments オブジェクトがない場合は、矢印関数の arguments オブジェクトが定義されていないため、アクセスしようとすると error:

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

直ちに呼び出される関数式（IIFE）

直ちに呼び出される関数式（IIFE）。「自己実行匿名関数」を使用すると呼び出される関数式です。自動的に適用されます。IIFE は、関数をグループ化演算子で囲むことで作成された関数式を使用します。次に、2 番目の一致したかっこで、関数を呼び出します。関数定義自体の後、または関数のグループ化の直後に配置します。演算子を使用します。標準関数を使用しても実質的な違いはありません理解することが重要です。

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

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

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

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

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

グループ化演算子は式を想定しているため、グループ化されて、その後のかっこでグループ化された expression:

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

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

理解度をチェックする

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

いいえ

○