JavaScript 関数の定義

JavaScript 関数は、functionキーワードを使用して定義されます。

関数宣言または関数式を使用できます。

関数宣言

関数が次の構文で宣言されます

<div>function <em>functionName</em>(<em>parameters</em>) { // 実行されるコード }</div>

宣言された関数はすぐには実行されません。これらは「後で使用するために保存」され、後で呼び出されたとき (呼び出されたとき) に実行されます。

例

function myFunction(a, b) { return a * b; }

自分で試してみる»

セミコロンは、実行可能な JavaScript ステートメントを区切るために使用されます。関数宣言は実行可能なステートメントではないため、セミコロンで終了することは一般的ではありません。

関数式

JavaScript 関数は式を使用して定義することもできます。

関数式は変数に格納できます。

例

const x = function (a, b) {return a * b};

自分で試してみる»

関数式を変数に格納すると、その変数を関数として使用できます。

例

const x = function (a, b) {return a * b}; let z = x(4, 3);

自分で試してみる»

上記の関数は実際には無名関数(名前のない関数)です。

変数に格納される関数には関数名は必要ありません。これらは常に変数名を使用して呼び出されます (呼び出されます)。

上記の関数は実行可能ステートメントの一部であるため、セミコロンで終わります。

The Function() Constructor

前の例で見たように、JavaScript 関数はfunctionキーワードを使用して定義されます。

関数は、Function()と呼ばれる組み込みの JavaScript 関数コンストラクターを使用して定義することもできます。

例

const myFunction = new Function("a", "b", "return a * b"); let x = myFunction(4, 3);

自分で試してみる»

実際には、関数コンストラクターを使用する必要はありません。上の例は次のように書くのと同じです。

例

const myFunction = function (a, b) {return a * b}; let x = myFunction(4, 3);

自分で試してみる»

ほとんどの場合、newJavaScript でのキーワードの使用は回避できます。

機能巻き上げ

このチュートリアルの前半で、「ホイスティング」(JavaScript 巻き上げ）について学でいます。

ホイスティングは宣言を現在のスコープの先頭に移動する JavaScript のデフォルトの動作です。

ホイスティングは変数宣言と関数宣言に適用されます。

このため、JavaScript 関数は宣言する前に呼び出すことができます。

<div>myFunction(5); function myFunction(y) { return y * y; }</div>

式を使用して定義された関数はホイストされません。

自己呼び出し関数

関数式は「自己呼び出し」にすることができます。

自己呼び出し式は、呼び出されることなく自動的に呼び出されます (開始されます)。

関数式は、式の後に () が続くと自動的に実行されます。

関数宣言を自己呼び出しすることはできません。

関数式であることを示すために、関数の周りに括弧を追加する必要があります。

例

(function () { let x = "Hello!!"; // I will invoke myself })();

自分で試してみる»

上記の関数は実際には匿名の自己呼び出し関数(名前のない関数)です。

関数は値として使用できます

JavaScript 関数を値として使用できます。

例

function myFunction(a, b) { return a * b; } let x = myFunction(4, 3);

自分で試してみる»

JavaScript 関数は式で使用できます。

例

function myFunction(a, b) { return a * b; } let x = myFunction(4, 3) * 2;

自分で試してみる»

関数はオブジェクトです

JavaScript の演算子typeofは関数に対して「function」を返します。

ただし、JavaScript 関数はオブジェクトとして説明するのが最も適切です。

JavaScript 関数にはプロパティとメソッドの両方があります。

このarguments.lengthプロパティは、関数が呼び出されたときに受け取った引数の数を返します。

例

function myFunction(a, b) { return arguments.length; }

自分で試してみる»

このtoString()メソッドは関数を文字列として返します。

例

function myFunction(a, b) { return a * b; } let text = myFunction.toString();

自分で試してみる»

オブジェクトのプロパティとして定義された関数は、オブジェクトのメソッドと呼ばれます。新しいオブジェクトを作成するために設計された関数は、オブジェクトコンストラクターと呼ばれます。

アロー関数

アロー関数を使用すると、短い構文で関数式を作成できます。

functionキーワード、returnキーワード、は中括弧が必要ありません。

例

// ES5 var x = function(x, y) { return x * y; } // ES6 const x = (x, y) => x * y;

自分で試してみる»

アロー関数には独自の this がありません。これらはオブジェクトメソッドの定義にはあまり適していません。

アロー関数はホイストされません。これらは使用する前に定義する必要があります。

関数式は常に定数値であるため、constを使用する方がvarを使用するより安全です。

関数が単一のステートメントである場合、returnキーワードと中括弧のみを省略できます。このため、常にこれらを維持するのが良い習慣になる可能性があります。

例

const x = (x, y) => { return x * y };

自分で試してみる»

矢印関数は IE11 以前ではサポートされていません。

人気オンラインプログラミングスクールランキング

プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう！

スクールの詳細

チュートリアル