【JavaScript】関数ってなに?引数と返り値の仕組みについて超わかりやすく解説してみた!

プログラミング初学者の方とお話をすると、ほぼ必ずと言っていいほど「関数ってなんですか?」と聞かれます。

このような質問に対して世間では「処理をまとめたもの」と説明されることがほとんどです。

ですが、これだとあまりにもザックリしすぎですよね。

そこで色々調べたところ「これが一番しっくりくる!」というものがありました。

初学者の方で「関数がよくわからない…」と感じている方は、ぜひこちらの記事を使って理解を深めていただきたいと思います!

関数とは

世間一般で言うところの関数とは、上記のように「処理をまとめたもの」と説明されることがほとんどです。

しかし、より正確に表現するとすれば以下のようになります

「関数とは、ある値を与えると(引数)、別の値(返り値)を返すもの」

これが最も正確に関数について説明している表現と言えるでしょう。

例えば自動販売機で飲み物を購入する場面を想像してみましょう。

ここでは自動販売機が「関数」だとします。

自動販売機で150円の飲み物を買うとき、最初にやることは「お金(150円)を入れる(引数)」ことです。

自動販売機は「お金を受け取って(引数)」、ボタンが押される(処理が実行)されると、150円硬貨が姿を変えて「飲み物(戻り値、別の値として)を返す」と言う処理が行われます。

まとめると、以下のような順番になります。

  • 自動販売機にお金を入れる(引数)
  • お金を入れたら、ボタンが押せるようになり飲み物を帰るようになる(処理が実行できる)
  • 結果として、150円が飲み物(戻り値)に姿を変えて(150円とは別の値になって)帰ってくる

と言うことになります!

これを世間一般では「処理をまとめたもの」と抽象的に言われてしまってるんですね。

わかるわけないやん?笑

ここから先はもう少し具体的な例を出して見ていこうと思います!

引数と返り値(戻り値)

関数は基本的に以下のように定義されます(この後にわかりやすい例を挙げます)。
※ここでは基本的なことを書きますので、アロー関数ではなく最も基礎的なfunctionで記載していきます。

function 関数名 ('第一引数','第二引数') {
 //処理内容
 let example = 第一引数 + 第二引数;
 return example;
}

console.log(関数名(100, 50));
//150と言う計算結果が帰ってくる

はい、もう意味不明です。

ここで先ほどの自動販売機に置き換えて書き直して見ましょう!

function jihanki(a, b) {
 let juicePrice = a + b;//処理内容①
 let result = `ジュースの値段は${juicePrice}円です`;//処理内容②
 return result;//戻り値
}

console.log(jihanki(100, 50));
//出力結果:ジュースの値段は150円です

順番に見ていきますしょう!

関数(jihanki)の定義

最初に関数を定義します。

上記の例だと「function jihanki(a, b)」の、「jihanki」の部分が関数となります。

functionを使って「jihanki」と言う名の関数を定義してあげてます。

処理の内容

処理の内容は以下の部分です。

let juicePrice = a + b;//処理内容①
let result = `ジュースの値段は${juicePrice}円です`;//処理内容②

ここでは変数を2つ用意しました。

それぞれの役割を見ていこうと思います。

①juicePriceにてジュースの値段を計算
②resultにて、計算結果とテキストを合わせたものを変数resultに格納

以上が処理の内容になります。

次に、返り値について見ていこうかと思います。

返り値(戻り値)

戻り値は以下の部分になります。

 return result;//戻り値

これで、返り値(戻り値)として返ってくるのは処理内容②で定義された変数「result」と言うことを宣言することができました。

処理内容はあくまで素y理ないようなので「最終的にどの値を返してきて欲しいのか」を宣言しなければなりません。

この場合最終的に帰ってきて欲しいのは「resultの処理内容」なので返り値(戻り値)として、

 return result;

を宣言したわけです。

引数を入れてみる

最後に処理が正しく行われるか確認するために、以下のコードを記述していたかと思います。

console.log(jihanki(100, 50));//100,50が引数
//出力結果:ジュースの値段は150円です

上記のコードで言うと、関数「jihanki」の引数は(関数に与える値)「100」と「50」になるわけです。

関数「jihanki」は現在「100」と「50」と言う数値を受け取りました。

その結果関数内で処理が行われ、もともと引数として関数に渡した関数は「100 + 50」をされて「150」と言う数字に処理された後に、「ジュースの値段は150円です」と言う値(別の値)になって帰ってきたと言うわけです。

まとめると以下のような手順になります

  • 関数「jihanki」にただの数値「100, 50」が入れられる
  • ただの数値「100, 50」は関数の中で計算され、150と言う別の数値になる
  • 最終的に「ジュースの値段は150円です」と言う別の値になって、帰ってきた

このようになります!

まとめ

このように、難しいと思われがちな関数ですがその構造自体は至ってシンプルなのです。

「関数とは、ある値を与えると(引数)、別の値(返り値)を返すもの」

関数はこれ以上でもこれ以下でもありません。

与えられた値(硬貨)が、ジュースになって帰ってきた。

それだけのことなのです。

一見すると、硬貨もジュースも同じ150円という価値を持っている面では同じです。

しかし、価値は同じだとしても硬貨とジュースでは明らかに別物ですよね。

このように、受け取ったものが、姿を変えて帰ってくるものが関数なのです。

少しはイメージが湧いたでしょうか?

この記事が少しでも役に立ったと言う方は、ぜひシェアボタンよりツイートお願いいたします!

お問い合わせはこちら