JS関数（関数）の定義と使い方

A function is a group of reusable code blocks that perform specific tasks (with specific functions). 前のセクションで使用された alert() と write() は、JavaScript の組み込み関数です。

 

組み込み関数を使用するだけでなく、自分で関数 (カスタム関数) を作成し、必要に応じてこの関数を呼び出すこともできます。これにより、繰り返しコードを記述することを回避できるだけでなく、後でコードを保守することも容易になります。このセクションでは、JavaScript を使用して独自の関数を作成する方法を主に紹介します。

JS定義関数

JS 関数宣言は function キーワードで開始し、その後に作成する関数の名前を続ける必要があります. function キーワードと関数名はスペースで区切られ、関数名の後に括弧( )が続きます.関数で使用されるパラメーターを定義するには (複数のパラメーターはコンマ,区切られます)、関数は最大 255 個のパラメーターを持つことができ、最後は中かっこ{ }であり、関数の関数本体を定義するために使用されます (つまり、関数を実装するコード) を次のように示します。

function functionName(parameter_list) {
// 関数内のコード
}

サンプルコードは次のとおりです。

 function sayHello(name){
    document.write("こんにちは、" + name + "さん");
} 

上記の例では、パラメーター名を受け取る必要がある関数 sayHello() を定義しています。この関数を呼び出すと、ページに “Hello…” が出力されます。

JS呼び出し機能

関数が定義されると、現在のドキュメントのどこからでも呼び出すことができます。関数の呼び出しは非常に簡単です。関数名の後に、alert()、write() のように括弧を追加するだけです。関数を定義するときに関数名の後にパラメーターを括弧で指定する場合、関数を呼び出すときに、対応するパラメーターも括弧で指定する必要があることに注意してください。

サンプルコードは次のとおりです。

 function sayHello(name){
    document.write("こんにちは、" + name);
}
// sayHello() 関数の呼び出し
sayHello('IT基礎'); 

ヒント: JavaScript では大文字と小文字が区別されるため、関数を定義するときは function キーワードを小文字にする必要があり、関数は宣言時と同じ大文字と小文字で呼び出す必要があります。

パラメータのデフォルト値

次の例に示すように、関数を定義するときに、関数のパラメーターの既定値を設定できるため、関数を呼び出すときに、パラメーターが指定されていない場合、既定値がパラメーター値として使用されます。

 function sayHello(name = "World"){
    document.write("こんにちは" + name);
}

sayHello();                 // 出力: こんにちは World
sayHello('it-kiso.com');     // 出力: こんにちは it-kiso.com 

JS 関数の戻り値

関数内で return ステートメントを使用して、関数を呼び出したプログラムに値 (関数の結果) を返すことができます. この値は、配列、オブジェクト、文字列など、任意の型にすることができます.戻り値を持つ関数の場合、変数を使用してこの関数の戻り値を受け取ることができます. サンプル コードは次のとおりです。

 function getSum(num1, num2){
    return num1 + num2;
}

var sum1 = getSum(7, 12);      // 関数の戻り値は：19
var sum2 = getSum(-5, 33);     // 関数の戻り値は：28 

ヒント: 通常、return ステートメントは関数の最後に定義されます。関数が return ステートメントまで実行されると、すぐに実行を停止し、関数が呼び出された場所に戻って実行を継続します。

さらに、関数は 1 つの戻り値しか持てません。複数の値を返したい場合は、次の例に示すように、値を配列に入れてから、この配列を返すことができます。

 function division(dividend, divisor){
    var quotient = dividend / divisor;
    var arr = [dividend, divisor, quotient]
    return arr;
}

var res = division(100, 4)
document.write(res[0]);         // 出力：100
document.write(res[1]);         // 出力：4
document.write(res[2]);         // 出力：25 

関数式は変数の宣言に非常に似ています. 関数の宣言の別の形式です. 構文は次のとおりです.

var myfunction = 関数名(parameter_list){
// 関数内のコード
};

パラメータの説明は次のとおりです。

• myfunction: 変数名。等号の後に関数を呼び出すために使用できます。
• 関数名: 省略可能な関数名 (通常は省略します)。省略した場合、関数は無名関数になります。
• parameter_list: パラメータ リストです。関数は最大 255 個のパラメータを持つことができます。

サンプルコードは次のとおりです。

 // 関数の宣言
function getSum(num1, num2) {
    var total = num1 + num2;
    return total;
}

// 関数の式
var getSum = function(num1, num2) {
    var total = num1 + num2;
    return total;
}; 

上記の例の 2 つの関数は同等であり、関数、戻り値、および呼び出しメソッドは同じです。

注: 関数宣言では、閉じ中かっこの後にセミコロンを配置する必要はありませんが、関数式を使用する場合は、式の最後にセミコロンを付ける必要があります。

関数宣言と関数式はよく似ていますが、次の例に示すように、動作が異なります。

 declaration();          // 出力: function declaration
function declaration() {
    document.write("function declaration");
}

expression();           // エラー：Uncaught TypeError: undefined is not a function
var expression = function() {
    document.write("function expression");
}; 

上記の例のように、関数式が定義される前に呼び出されると、例外 (エラー) がスローされますが、関数宣言は正常に実行されます。これは、JavaScript がプログラムの実行前に関数宣言を解析するためです。そのため、関数宣言の前でも宣言後でも関数を呼び出すことができます。関数式は無名関数を変数に代入するものなので、プログラムが式を実行する前は、関数が定義されていないのと同じで、呼び出すことができません。