JavaScriptのコードを書こう7 関数を使って、同じ処理を何度も行おう

<script>
//計算するための関数
function calculate(x, y){
    //結果を入れる変数
    var result;
    result = x + y;
    return result;
}

//計算結果を入れる
var addition;
var addition2;

//作成した関数の呼び出し
addition = calculate(5, 8);

//13と表示される
document.write(addition);

//改行
document.write("<br>");

var x = 4;
var y = 10;

//作成した関数の呼び出し
addition2 = calculate(x, y);

//14と表示される
document.write(addition2);
</script>

コードのはじめにfunction calculate(x, y){}と書かれていますが、このコード全体を実行しても、functionで囲まれた箇所は読み込まれません。コードの実行はfuncitonで囲まれた箇所を飛ばして処理を開始し、addition = calculate(5, 8);の時にfunctionで囲まれた箇所が読み込まれます。functionで書かれたコードを関数と呼び、同じような処理を何度も行う際に処理をひとまとめにしておいて、functionの後に書かれているcalculate()と書くことで予め準備しておいた関数を呼び出し処理を行います。

function calculate(x, y){
    var result;
    result = x + y;
    return result;
}

となっています。最初にこの関数を呼び出しているaddition = calculate(5, 8);を見ると、calculateの後にあるカッコで5と8といった値を二つ渡しており、calculate(5, 8)を入れたadditionを表示してみると13と表示されていることから、calculate関数では、5と8を足して、その結果を返す(変数に結果を入れる)という処理をしていることになります。。改めてcalculate関数を見てみると、

function calculate(x, y){
    var result;
    result = x + y;
    return result;
}

一行目のfunctionの後に呼び出すための関数名をcalculateとしておいて、その後のカッコ内にxとyといった変数らしきものがあります。これを引数(ひきすう)と呼ぶのですが、呼び出しがcalculate(5, 8)で、x = 5、y = 8のように対応しています。これは「関数calculateは値を二つ入れてください」という意味があります。次の行を見ていくと、var result;は関数内で使う変数を宣言し、result = x + y;で計算を行い、result変数に計算結果を入れます。最後の行にあるreturn result;は関数内で計算した結果を返すという意味で、試しに

function calculate(x, y){
    var result;
    result = x + y;
}

var addition;
addition = calculate(5, 8);
document.write(addition);  //undefinedと表示される

を実行してみると、undefinedと表示されます。undefinedとは未定義値といい、変数に何も入っていないことを意味しています。

サンプルコードに戻って、

function calculate(x, y){
    var result;
    result = x + y;
    return result;
}

//計算結果を入れる
var addition;
var addition2;

addition = calculate(5, 8);
document.write(addition);   //13と表示される

//改行
document.write("<br>");

var x = 4;
var y = 10;

addition2 = calculate(x, y);
document.write(addition2);   //14と表示される

calculate関数の引数に違う数字を入れると表示させる数字が変わってくるので、大体決まっている処理があったら関数にしてまとめておきましょう。