HOWTO · JavaScript

JavaScript インライン関数と定義済み関数の違い

この記事は、JavaScript のインライン関数と定義済み関数を理解するのに役立ちます。

このページの内容

このチュートリアルでは、インライン関数と JavaScript の定義済み関数について調べます。 それらは名前付き関数とも呼ばれますので、関数式と関数ステートメントを理解しようとします。

JavaScript インライン関数

変数に入れられた無名関数は、JavaScript のインライン関数です。 匿名関数の URL を使用して常に呼び出されます。 無名関数は必須ではなく、実行時に形成されます。

匿名関数とインライン関数の両方が実行時に作成されるという事実により、それらはほぼ同等になります。 一方、インライン部分は変数に割り当てられているため、再利用することができます。

この点で、インライン関数は通常の関数と同じように機能します。

コード例:

 <script type="text/javascript">
        var samelineFunc = function () {
            alert("inline function");
        };
        $('#inline_func_c').click(samelineFunc);
    </script>

実行コード

出力:

インライン関数出力

インライン関数では、いつでもどこでも使用できる変数が生成されました。

JavaScript 定義済み関数

JavaScript の定義済み関数のコレクションは、呼び出されたときに特定のタスクを実行します。 それらのいくつかは次のとおりです。

定義済み関数

コード例:

var k = 50;
var b = 30;
var c = eval('k + b');
document.write('The result of eval is: ' + c + '<br>');

実行コード

出力:

The result of eval is: 80

JavaScript 関数ステートメント

function ステートメントは、関数を宣言します。 定義されたプロセスが後で呼び出されると、後で使用するために保存され、実行されます。

変数宣言が var で始まらなければならないのと同様に、関数宣言は function で始まらなければなりません。

コード例:

function add() {
  return a;
}

関数はここでのみ宣言されていました。 使用する関数名を使用して呼び出す必要があります。 例: add();

関数式の使用例を見てみましょう。

function add(b, c) {
  return b + c;
}
console.log(add(4, 5));

実行コード

出力:

9

JavaScript 関数式

関数式と関数宣言は似ていますが、関数式は変数に入れることができます。 関数は、式で定義されるとすぐに呼び出されます。

JavaScript 関数を記述するために式を使用することもできます。 関数式を変数に保持することが可能です。

コード例:

var add = function(b, c) {
  return b + c;
};

変数は、関数式を記述した後に関数として利用できます。 変数に格納された関数には、関数名は必要ありません。

それらは、変数名を使用して常に呼び出されます (呼び出されます)。

コード例:

var add = function(b, c) {
  return b + c;
};

console.log(add(5, 4));

実行コード

出力:

9

関数式は、インタープリターがそのコード行に到達するとロードされますが、関数宣言はコードが実行される前にロードされます。

関数宣言は、var ステートメントと同様に、コードの他の行の先頭に昇格されます。 関数式は、巻き上げられないため、宣言されたスコープからローカル変数のコピーを保持できます。

関数式は、クロージャー、関数式をすぐに呼び出す他の関数のパラメーター、および関数宣言 (IIFE) よりもそれらをより便利にするさまざまな方法として使用できます。