関数式

関数式は関数 式が想定される場所に作成されます。関数式は、変数に代入される値としてよく使用されます。関数宣言は、 には名前が必要です。関数式を使用して匿名 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 でラップすることが一般的でした。これにより、 世界で起きた偶発的な汚染

理解度をチェックする

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

いいえ
○