JavaScriptを習得したい

on Note

関数とは何なのか知りたい

関数とは、一定の処理をする箱と考えることができます。箱に何か値を入れる(入力と呼ぶ)と箱の中で処理が行われて、その結果が出てくる(出力と呼ぶ)。それが関数のイメージです。

JavaScriptでは、この時の入力する値が入る変数を引数、結果として出力される値が入る変数を戻り値と呼びます。

関数のイメージ

関数を定義(つまり箱を作る)しておけば、何度か同じ処理をさせたい場合でも再び処理文を書くことなく、関数を呼び出すだけで処理を再現することができます。

どのように関数を定義するのか

関数の宣言にはfunctionキーワードを使います。
function 関数名 ( 引数 ) { 処理 }

functionで関数の宣言をして、関数名を付けます。

引数は、必要であれば書きますが、不要なら( )とするだけで構いません。

その関数で行ってほしい処理を{ }(波括弧)の中に書きます。

function greeting() {
    console.log("Hello");
}

関数を使う

上の見本では関数の定義はできましたが、このままでは中の命令通りにconsoleウィンドウに出力してくれません。

関数を実行するには、関数を呼び出す必要があります
関数名();

function greeting() {
    console.log("Hello");
}
greeting();

これでconsoleウィンドウに「Hello」と出力されます。

今回は、関数の中だけで処理を完結してもらう為、引数と戻り値が必要ないケースです。このような場合は、( )の中は空にし、戻り値の設定もしません。

計算などでは、その都度入力したい値を引数に渡し、その計算結果を返してもらう必要があります。その場合の具体例が次の章です。

引数と戻り値を使った具体例

具体例として、関数に円の面積を計算してもらいます。円の面積を求める公式「半径 × 半径 × 3.14」を関数で定義しておきます。

関数を呼び出す側で、その時入力したい値(半径)を引数に渡して、計算結果(面積)として戻り値を得ます。

function calcArea (radius) {
    area = radius * radius * 3.14;
    return area;
}

calcArea(5);    // 引数「radius」 に5が入り、結果として「78.5」を得る。
calcArea(8);    // 引数「radius」 に8が入り、結果として「200.96」を得る。

結果「78.5」と「200.96」という値が返ってきます。上の具体例を読み解いていきます。

function で関数の宣言をして、「calcArea」という関数名をつけました。関数の呼び出し側から投げられてくる入力値が入る変数の名前は「radius」にしました。変数「radius」は、関数の中の処理で利用されます。

処理は{ }の中に書いていきます。
function calcArea (radius) { 処理 }

関数の中でしてほしい処理は「半径 × 半径 × 3.14」です。半径の値は変数「radius」で渡されます。そしてこの計算結果を変数「area」に代入します。
area = radius * radius * 3.14;

求められた値が入った変数「area」は return によって呼び出し側に返されます。
return area;

これで関数を定義できました。

関数は関数名で呼び出します。関数名の( )に、関数に入力したい値を書けば、その値に沿った結果が返ってきます。
calcArea(5);
calcArea(8);

console.log( )の中に入れればconsole画面に表示されます。
console.log(calcArea(5));

引数が2つ以上になる時は「,」(カンマ)区切りで並べます。

function calcArea (x, y, z) {
    area = x * y *z;
    return area;
}

calcArea(3, 5, 7);     // 105 が返ってくる

入力値に指定した複数の値「3」「5」「7」に、引数「x」「y」「z」と順番に対応します。

関数は変数に代入できる

定義した関数は、そのまま変数に代入することができます
const 変数名 = function (引数) {処理};

この状態の式を関数式と呼びます。

関数式では関数名を付ける必要はありません。関数を変数に代入していますので、その関数が必要な時は変数名で呼び出す形となります。

関数名がなくても処理が動く、というわけですが、関数名が付いていない関数を匿名関数無名関数と呼びます。