最新！JavaScript入門講座ー関数の引数と返り値をわかりやすく解説

関数は任意の処理を実行するだけではなく、2つの特徴も持っています。1つは、引数といって値を別のところから関数へ渡してそうさせることができます。２つ目は返り値という関数内で処理した値を関数の定義先へ返すという機能です。

これらを参照渡しなどと言います。関数はむしろこのようなことが一般的と言えます。
そこで今回は初心者の方向けに関数の引数と返り値についてわかりやすく、解説していきます！

本記事のペルソナ

関数について学びたい方
関数の引数と返り値について学びたい方
JavaScript初学者の方

第20回関数の基本

第22回関数式

関数の解説
1. 関数の引数とは？
2. 関数の返り値
まとめ
参考文献

関数の解説

関数の引数とは？

では、順番に解説していきます。最初は引数について解説していきます。
まずは書き方の例から見ていきましょう。

コード例

function 関数名(引数1,引数2,….){
実行する処理
実行する処理
・
　　　・
　　　・
}

関数名(引数1,引数2,….);

これが引数を含む関数の書き方になります。関数を定義するときにカッコ内に引数を内包します。
引数は理論上は正しく書けば多数入れることができます。しかし、あまりにも多い引数を入れるのはコードが見辛くなる原因になりますので、そのあたりは調整が必要です。

では、サンプルを見ていきましょう。

function calc(num1,num2){
    console.log(`${num1} + ${num2} = ${num1+num2}`);
    console.log(`${num1} - ${num2} = ${num1-num2}`);
    console.log(`${num1} * ${num2} = ${num1*num2}`);
    console.log(`${num1} / ${num2} = ${num1/num2}`);
    console.log(`${num1} ^ ${num2} = ${num1**num2}`);
}

calc(4,7);

$ node func.js

4 + 7 = 11
4 - 7 = -3
4 * 7 = 28
4 / 7 = 0.5714285714285714
4 ^ 7 = 16384

簡単な例はこの通りです。関数は四則演算プラス指数計算を行う処理をしています。この場合、引数は2つなので、関数を定義している部分にも、同じ数になるようにそれぞれ変数をつけています。
基本的には引数には任意の変数名をつけることが可能です。

もう一つ例を見てみましょう。

function calc(num1,num2){
    console.log(`${num1} + ${num2} = ${num1+num2}`);
    console.log(`${num1} - ${num2} = ${num1-num2}`);
    console.log(`${num1} * ${num2} = ${num1*num2}`);
    console.log(`${num1} / ${num2} = ${num1/num2}`);
    console.log(`${num1} ^ ${num2} = ${num1**num2}`);
}

let number1,number2;

for(let i = 0;i < 3;i++){
    number1 = Math.floor(Math.random()*11);
    number2 = Math.floor(Math.random()*11);
    calc(number1,number2);
}

$ node func.js

7 + 1 = 8
7 - 1 = 6
7 * 1 = 7
7 / 1 = 7
7 ^ 1 = 7
2 + 7 = 9
2 - 7 = -5
2 * 7 = 14
2 / 7 = 0.2857142857142857
2 ^ 7 = 128
6 + 10 = 16
6 - 10 = -4
6 * 10 = 60
6 / 10 = 0.6
6 ^ 10 = 60466176

こちらは3回先ほどの処理を繰り返します。引数には0から10の範囲のランダムの数字を引数にしています。

関数の返り値

続いて、返り値について解説していきます。まずは書き方についてみていきましょう。

コード例

function 関数名(引数1,引数2,引数3,….){
実行する処理
実行する処理

return 返り値
}

let value = 関数名(引数1,引数2,引数3,….)

返り値を扱うには、関数の最後に予約後であるreturnと返す値を記述するだけです。これをすることで何かしらの計算をした結果を返すことができます。

では実際の例を見てみましょう。

function stock(flag){
    let array = ["VYM","SPYD","HDV","VOO","IVV","SPY","VTI","VEA","GLD","QQQ"];
    return array[flag];
}

let ticker;
for(let i = 0;i < 5;i++){
    ticker = stock(Math.floor(Math.random()*11));

    console.log(ticker);
}