【JavaScript】JavaScriptの基礎復習8 関数で計算してみる（return）【簡単コピペ】

JavaScriptなどプログラム言語で使われる関数。今回は関数で計算！　実行内容としては計算して、その結果を返すという処理になります。

ちなみに、プログラムにおける関数とは

与えられた文字や数値に対し、定められた処理を行って結果を返す機能のこと。
コトバンク ASCII.jpデジタル用語辞典の解説より引用

となってます。

計算について復習

以前、足し算の回をやりました。

【JavaScript】JavaScriptの基礎復習2 足し算【簡単コピペ】

主にwebサイトでのJavaScriptって、表示の切り替えや制御、ボタンの処理なんかが多かったりするのではないでしょうか？　もちろ...

tks-kan.com

それをふまえて、こんな感じでコードを書いてみます。

var a = 1;
var b = 2;
var x = a + b;
output(x);

function output(text){
    alert(text);
};

結果は「3」。ではこれを関数で処理してみたいと思います。

ふたつの数字の足し算を関数化

上のタイトルが問題文だったとして、答えを書いてみましょう。今までの復習ができていればできちゃいそうですよね。

function add(a, b) {
    var x = a + b;
};

関数に渡す数値や文字を複数設定する場合は、カンマ（，）で区切ることで可能になります。なので、これで計算は出来ているはずです。というわけで、下のようなコードに書き換えてみました。

var a = 1;
var b = 2;
add(a, b);

function add(a, b) {
    var z = a + b;
};
function output(text){
    alert(text);
};

あれ？　これだと計算はたしかに出来ていると思うんですが、実際に結果を表示することができないですよね。さて、どうしましょうか。addの関数で計算した結果（入れ物「z」）の値を表示できるようにすればいいはず。というわけで、次のように改造。

var a = 1;
var b = 2;
add(a, b);

function add(a, b) {
    var z = a + b;
    alert(z);
};

結果は…ちゃんと表示されました。でも、これだとaddという関数は「計算」だけではなく「表示」も実行してしまうものになってしまいます。計算だけしたくて結果は表示したくない場合もあるかもしれません。そこで、計算した結果を返す命令をつかいます。

return;　を使う

数値や値を返す処理をする時には「return」を使います。

return 返したい内容;

書き方は上のような感じになります。これを先ほどのコードに当てはめて改造してみます。

var a = 1;
var b = 2;
var x = add(a, b);

function add(a, b) {
    var z = a + b;
    return z;
};

変化点がふたつ。

var x = add(a, b);

returnによって結果が返ってくるので、それを入れる入れ物を用意しなければなりません（じゃないと返ってきた結果がどこに入るのか分からないですからね）。よって、「x」という入れ物を用意してあげました。

retuen z;

関数の中で計算した結果「z」の中身を返しています。これにより「add(a, b);」の結果が「x」に収まるわけです。

では、結果表示の関数をもう一度用意して実行してみましょう。

var a = 1;
var b = 2;
var x = add(a, b);
output(x);

function add(a, b) {
    var z = a + b;
    return z;
};
function output(text){
    alert(text);
};

無事結果が表示されましたね。

四則計算の関数を作成

こんどは引き算、割り算、掛け算も用意してみましょう。それぞれ

function subt(a, b) {
    return a - b;
};

function mult(a, b) {
    return a * b;
};

function divi(a, b) {
    return a / b;
};

よくみると、returnで直接計算式が書かれているかと思います。このような使い方もできるので覚えておきましょう。

では以下のコードを実行してみます。

var a = 1;
var b = 2;
var x = add(a, b);
var y = subt(a, b);
output(y);

function add(a, b) {
    var z = a + b;
    return z;
};
function subt(a, b) {
    return a - b;
};
function mult(a, b) {
    return a * b;
};
function divi(a, b) {
    return a / b;
};
function output(text){
    alert(text);
};

結果は「-1」。ちゃんと計算できていましたね。

まとめ

今回は関数で計算してみました。関数で値（数字だけじゃなくて文字などもできます）を返す処理「return」を使うことで、関数の活用幅がさらに広がります。是非とも色々とチャレンジしてみてください。最後にコードを載せておきます。本文中にはない部分もありますので、結果はコピペでチェック！

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>JavaScript</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <div id="ele"></div>
    <script>
    var a = 1;
    var b = 2;
    var x = add(a, b);
    var y = subt(a, b);
    output(x);
    output(y);
    output(mult(a, b));
    output(divi(a, b));

    function add(a, b) {
        var z = a + b;
        return z;
    };
    function subt(a, b) {
        return a - b;
    };
    function mult(a, b) {
        return a * b;
    };
    function divi(a, b) {
        return a / b;
    };
    function output(text){
        alert(text);
    };

    </script>
</body>
</html>

計算について復習

ふたつの数字の足し算を関数化

return; を使う

四則計算の関数を作成

まとめ

return;　を使う