JavaScriptの関数について基礎から易しく解説！

JavaScript
2021/12/28
目次

JavaScriptの関数とは

JavaScriptでは、関数によってコードのブロックを定義し、それに名前を付けて、何度でも実行することができます。

JavaScriptの関数はfunctionキーワードで定義することができます。

//関数の定義
function 関数名() {
  // 処理
};

//関数呼び出し
関数名();

次の例は、JavaScriptで関数を定義して呼び出す方法を示しています。

function DisplayMessage() {
    console.log("Hello World!");
}

DisplayMessage();

上記の例では、コンソールに “Hello World!”を表示するDisplayMessage関数を定義しています。

この関数は、例えば DisplayMessage() のように () 演算子を用いて実行することができます。

関数の引数について

関数は1つ以上の引数を持つことができ、呼び出し元のコードから提供され、関数の内部で使用することができます。

JavaScript は動的なスクリプト言語なので、関数のパラメータはどのようなデータ型でも持つことができます。

function ShowMessage(firstName, lastName) {
    alert("Hello " + firstName + " " + lastName);
}

ShowMessage("Koji", "Tanaka");
ShowMessage("Mami", "Sato");
ShowMessage(100, 200);

関数を呼び出すときに、関数に定義してある引数より、少ないまたはより多くの引数を渡すことができます。

もし少ない数の引数を渡した場合、残りの引数はundefinedになります。

より多くの引数を渡した場合、追加の引数は無視されます。

function ShowMessage(firstName, lastName) {
    alert("Hello " + firstName + " " + lastName);
}

ShowMessage("Koji", "Tanaka", "Mr."); // Hello Koji Tanaka
ShowMessage("Tanaka"); // Hello Tanaka undefined
ShowMessage(); // Hello undefined undefined

引数オブジェクト

JavaScript のすべての関数は、デフォルトで引数オブジェクトを使用することができます。引数オブジェクトは各パラメータの値を含みます。

引数オブジェクトは、配列のようなオブジェクトです。

配列と同じようにインデックスを使ってその値にアクセスすることができます。しかし、配列のメソッドはサポートしていません。

function ShowMessage(firstName, lastName) {
    console.log("Hello " + arguments[0] + " " + arguments[1]);
}

ShowMessage("Koji", "Tanaka"); 
ShowMessage("Taro", "Sato
ShowMessage(100, 200);

引数オブジェクトは、関数に引数が含まれていない場合でも有効です。

function ShowMessage() {
    alert("Hello " + arguments[0] + " " + arguments[1]);
}

ShowMessage("Koji", "Tanaka"); // Hello Koji Tanaka

引数オブジェクトは、forループで反復処理することができます。

function ShowMessage() {
    for(var i = 0; i < arguments.length; i++){
        alert(arguments[i]);
    }
}

ShowMessage("Koji", "Tanaka");

戻り値について

関数は、return キーワードを使って 0 または 1 の値を返すことができます。

function Sum(val1, val2) {
    return val1 + val2;
};

let result = Sum(100, 20); // returns 120

function Multiply(val1, val2) {
    console.log( val1 * val2);
};

result = Multiply(100, 20); // undefined

上の例では、Sumという関数がval1とval2を足して返しています。したがって、呼び出し側のコードは、戻り値を取得し、変数に代入することができます。

2番目のMultiply関数は値を返さないので、result変数はundefinedになります。

　

JavaScriptでは、関数は別の関数を返すこともできます。

function multiple(a) {
    function fn(b) {
        return a * b;
    }
    
    return fn;
}

let triple = multiple(4);
triple(2); // 8
triple(3); // 12

関数式について

JavaScriptでは、ある関数を変数に代入し、その変数を関数として使用することができます。

これを関数式と呼びます。

let add = function sum(val1, val2) {
    return val1 + val2;
};

let result1 = add(100, 20);
let result2 = sum(100, 20); // 失敗する

無名関数の使い方について

JavaScriptでは、関数名を無名で定義することができます。この無名の関数を無名関数と呼びます。

また、無名関数は変数に代入する必要があります。

let showMessage = function (){
    console.log("Hello World!");
};

showMessage();

let sayHello = function (firstName) {
    console.log("Hello " + firstName);
};

showMessage();
sayHello("Bill");

無名関数は、コールバック関数を渡したり、クロージャを作成したり、関数式を即座に呼び出したりするのに便利な関数です。

ネストされた関数

JavaScriptでは、関数は1つ以上の内部関数を持つことができます。

これらのネストされた関数は、外部関数のスコープ内にあります。

内部関数は、外部関数の変数やパラメータにアクセスすることができますが、外側関数は内側関数の内部で定義された変数にアクセスすることはできません。

function ShowMessage(firstName) {
    function SayHello() {
        console.log("Hello " + firstName);
    }

    return SayHello();
}

ShowMessage("Tanaka");

タイトルとURLをコピーしました