JavaScript 関数

要約: このチュートリアルでは、JavaScript 関数と、より小さく再利用可能な単位にコードを構造化するためにそれらを使用する方法について学びます。

JavaScript 関数の紹介

アプリケーションを開発するときには、多くの場所で同じアクションを実行することがよくあります。たとえば、エラーが発生するたびにメッセージを表示したい場合があります。

同じコードをあらゆる場所で繰り返さないようにするには、そのコードをラップして再利用する関数を使用します。

JavaScript は、parseInt() や parseFloat() などの多くの組み込み関数を提供しています。このチュートリアルでは、カスタム関数の開発方法を学びます。

関数の宣言

関数を宣言するには、function キーワードを使用します。その後に関数名、パラメーターのリスト、および以下のような関数の本体を指定します。

function functionName(parameters) {
    // function body
    // ...
}Code language: JavaScript (javascript)

関数名は有効な JavaScript 識別子である必要があります。慣例により、関数名はキャメルケースで getData()、fetchContents()、および isValid() などの動詞から始まります。

関数は、パラメーターを 0、1、または複数受け入れることができます。複数のパラメーターの場合、2 つのパラメーターを区切るにはコンマを使用する必要があります。

以下に、パラメーターを受け付けない say() 関数を宣言します。

function say() {
}Code language: JavaScript (javascript)

以下に、1 つのパラメーターを受け付ける square() という名前の関数を宣言します。

function square(a) {
}Code language: JavaScript (javascript)

以下に、2 つのパラメーターを受け付ける add() という名前の関数を宣言します。

function add(a, b) {
}Code language: JavaScript (javascript)

関数の本体内で、アクションを実装するコードを記述できます。たとえば、次の say() 関数は単にコンソールにメッセージを表示します。

function say(message) {
    console.log(message);
}Code language: JavaScript (javascript)

say() 関数の本体内で、console.log() 関数を呼び出してメッセージをコンソールに出力します。

関数の呼び出し

関数を使用するには、呼び出す必要があります。関数を呼び出すことは、関数を呼び出すとも呼ばれます。関数を呼び出すには、以下のように丸括弧で囲まれた引数でその名前を使用します。

functionName(arguments);Code language: JavaScript (javascript)

関数を呼び出すと、JavaScript は関数の本体内のコードを実行します。たとえば、以下に say() 関数呼び出す方法を示します。

say('Hello');Code language: JavaScript (javascript)

この例では、say() 関数を呼び出し、リテラル文字列 'Hello' を渡しています。

パラメーターと引数

パラメーターと引数の用語は、しばしば同義に使用されます。ただし、それらは本質的には異なります。

関数を宣言するときは、パラメーターを指定します。ただし、関数を呼び出すときは、パラメーターに対応する引数を渡します。

たとえば、say() 関数では、message がパラメーターであり、'Hello' 文字列は message パラメーターに対応する引数です。

値の返し

JavaScript のすべての関数は、戻り値を明示的に指定しない限り暗黙的に undefined を返します。例:

function say(message) {
    console.log(message);
}

let result = say('Hello');
console.log('Result:', result);Code language: JavaScript (javascript)

出力

Hello
Result: undefinedCode language: JavaScript (javascript)

関数の戻り値を指定するには、次のように return ステートメントの後に式または値を使用します。

return expression;Code language: JavaScript (javascript)

たとえば、次の add() 関数は 2 つの引数の合計を返します。

function add(a, b) {
    return a + b;
}Code language: JavaScript (javascript)

以下に、add() 関数を呼び出す方法を示します。

let sum = add(10, 20);
console.log('Sum:', sum);Code language: JavaScript (javascript)

出力

Sum: 30Code language: HTTP (http)

次の例では、条件に基づいてさまざまな値を返す関数で複数の return ステートメントを使用します。

function compare(a, b) {
    if (a > b) {
        return -1;
    } else if (a < b) {
        return 1;
    }
    return 0;
}Code language: JavaScript (javascript)

compare() 関数は 2 つの値を比較します。次の値を返します。

• 最初の引数が 2 番目の引数よりも大きい場合、-1。
• 最初の引数が 2 番目の引数よりも小さい場合、1。
• 最初の引数が 2 番目の引数と等しい場合、0。

関数がreturnステートメントに到達すると、即座に実行が停止します。したがって、次のようにreturnステートメントを値なしで使用して、関数を早期終了できます。

function say(message) {
    // show nothing if the message is empty
    if (! message ) {
        return;
    }
    console.log(message);
}Code language: JavaScript (javascript)

この例では、messageがブランク（またはundefined）の場合、say()関数は何も表示しません。

関数は1つの値を返します。複数の値を関数から返す場合は、それらの値を配列またはオブジェクトでパックする必要があります。

引数オブジェクト

関数内では、関数の名前付き引数を表すargumentsというオブジェクトにアクセスできます。

argumentsオブジェクトは、Array型のインスタンスではありませんが、配列のように動作します。

たとえば、角括弧[]を使用して引数にアクセスできます。arguments[0]は最初の引数を返し、arguments[1]は2番目の引数を返します。以降も同様です。

また、argumentsオブジェクトのlengthプロパティを使用して引数の数を判断できます。

次の例は、任意の数の引数を足し合わせる汎用add()関数を実装しています。

function add() {
    let sum = 0;
    for (let i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}Code language: JavaScript (javascript)

したがって、次のように任意の数の引数をadd()関数に渡すことができます。

console.log(add(1, 2)); // 3
console.log(add(1, 2, 3, 4, 5)); // 15Code language: JavaScript (javascript)

function hoisting

JavaScriptでは、関数を宣言する前に使用できます。以下に例を示します。

showMe(); // a hoisting example

function showMe(){
    console.log('an hoisting example');
}Code language: JavaScript (javascript)

この機能はホスティングと呼ばれます。

function hoistingは、JavaScriptエンジンが実行前に関数宣言をコードの先頭に物理的に移動する仕組みです。

以下は、JavaScriptエンジンが実行する前のコードのバージョンです。

function showMe(){
    console.log('a hoisting example');
}

showMe(); // a hoisting exampleCode language: JavaScript (javascript)

要約

• functionキーワードを使用して関数を宣言します。
• functionName()を使用して関数を呼び出します。
• すべての関数は、明示的に値を返さない場合、暗黙的にundefinedを返します。
• returnステートメントを使用して、明示的に関数の値を返します。
• arguments変数は、関数の引数を表す関数の内側にある配列のようなオブジェクトです。
• function hoistingにより、関数を宣言する前に呼び出すことができます。