【初学者必見】"スライド１枚"でJavaScriptの「関数・引数・戻り値」の処理順序を解説

10492 ワード
関数 戻り値 JavaScript 基礎 引数 JavaScript テキストリンク

はじめに

私はプログラミング学習初期にJavaScriptの「関数・引数(ひきすう)・戻り値」の理解でつまずきました。その時に 「プログラムがどのような順番で処理されているかが一目で分かる」スライドがあったら理解しやすいと思ったため、実際にスライドを作成して図解してみました。

記事の見方

スライド１枚で「関数・引数・戻り値」の処理が理解出来ることを目指しているので、まずはスライドを見ていただければと思います。もし、理解がいまひとつだったり、違うアプローチでも学んでみたいという方に向けて、【補足】初学者の頃の自分に対して解説という項目で、より細かい文章に落とし込んでいますので、是非そちらの方も参考にしていただければと思います。

想定読者

JavaScriptの「関数・引数・戻り値」の理解に悩まれている方をイメージして執筆いたしました。
少しでもお力になれば幸いです。

今回解説するコード

main.js
function calculateSquareArea(length) {
    return length * length;
}
const result = calculateSquareArea(3);
console.log(result);

スライド1枚解説

【補足】初学者の頃の自分に対して解説

関数ってなに？

ひとまず「関数＝プログラムの収納ボックス」と考えればいいと思います。
イメージとして、「普段は収納ボックスの中にプログラムをしまっておいて、必要な時に収納ボックスを開けてその中のプログラムを実行する」、という感覚を持っておけばいいのではないかと。

関数の作り方と呼び出し方を２ステップで解説

① 関数の定義　（収納ボックスを作ってプログラムを収納する）

まずは収納ボックス自体を作る必要があります。言い換えると「関数の定義」をする必要がある。
理由としては関数の定義をしなければ、プログラムを収納する場所もないからです。
実際に下記のコードを元に解説していきます。

【関数の定義方法】

「function」は関数を作ることの宣言を意味している。（今から収納ボックスを作るという宣言）
その横に収納ボックスの名前、つまり関数名(calcalateSquareArea)を書くことで関数の定義が出来るということになる。あとは{ }の中に処理したいプログラムを書いていけばOK。

main.js
function calculateSquareArea() {
   //収納ボックスの中身（プログラムをここに書いていく） 
}

今回はcalculateSquareAreaという関数を作ったわけですが、
関数の命名に関してはいくつか決まり事があるので、参考リンクまでに貼っておきます。

JavaScriptの命名規則▶︎https://techacademy.jp/magazine/21448
予約語▶︎https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Reserved_Words

② 関数の呼び出し　（収納ボックスを開けて中のプログラムを実行する）

①で収納ボックス作ってその中にプログラムを準備しましたが、それだけだとプログラムは動きません。
理由としては収納ボックスを開ける必要があるからです。このボックスを開けて中のプログラムを動かすことを「関数の呼び出し」 といいます。

【関数の呼び出し方法】

下記の通り関数の外に関数名を書くだけで、
記述された関数が呼び出されてその中に書かれているプログラムを実行することが出来ます。

main.js
function calculateSquareArea() {
   //収納ボックスの中身（プログラムをここに書いていく）
   //ここに書かれたプログラムは関数が呼び出された時に実行される
}

//関数を呼び出すための記述（収納ボックスを開ける）
calcalateSquareArea();

引数と戻り値ってなに？

引数とは

関数への入力を意味しています。
関数で出てきた収納ボックスの例えを用いると、収納ボックス（関数）を開く時に、中に投入するもの（引数）というイメージです。
つまり、引数とは、関数を呼び出す時に、関数やプログラムの中に入力する「値」のこと。

戻り値とは

関数からの出力を意味しています。
関数で出てきた収納ボックスの例えを用いると、収納ボックス（関数）を開いて、中のものを取り出す（戻り値）というイメージです。
つまり、戻り値とは、関数を実行した結果、出力される「値」のこと。

身近なものに例えて解説

もう少し具体的な例えで解説してみます。

関数 ＝ 洗濯機
引数 ＝ 汚れた白シャツ
戻り値 ＝ 綺麗な白シャツ

洗濯機を回す時（関数を呼び出す時）に、汚れた白シャツ（引数）を入れる。
洗濯機を回した結果（関数内部のプログラムを実行した結果）、綺麗な白シャツ（戻り値）が出てくる。

実際のコードを見ながら解説

スライドでも解説しているコードを用いて説明してみます。
ここからの説明や処理の順番で分からなくなったら一度スライドを見返してみて下さい。

解説するコードはこちら

main.js
                             //⬇︎仮引数
function calculateSquareArea(length) {

   return length * length; 
}
                                //⬇︎実引数
const result = calculateSquareArea(3);

console.log(result);

関数の呼び出し

最初に関数の呼び出しを行います。（スライド③-①参照）

呼び出しと同時に、定義された関数calculateSquareAreaに3という引数を渡そうとしています。

「洗濯機のふたを開けて、汚れた白シャツを中にいれようとしている状態」

main.js
              //⬇︎関数の呼び出し　　//⬇︎実引数
const result = calculateSquareArea(3);

引数の引き渡し

呼び出された関数が下記のコードにあたります。
まず、実引数(3)を、仮引数(length)に引き渡します。結果「 length = 3 」となります。（スライド③-②参照）
引数は関数内のプログラムで使うことが出来るので、実際に内部の処理を見ていきます。

「洗濯機の中に、汚れた白シャツをいれた状態」

戻り値を呼び出し元に返す

まず、関数内のlength ✳︎ lengthという処理を実行すると9という結果になることが分かります。
次にreturnという記述がありますが、これは関数内の処理結果を関数の呼び出し元に返す（出力する）という意味があります。
今回でいうと9という結果を呼び出し元に返すことになります。（スライド③-⑤参照）

「洗濯機から、きれいな白シャツが出てきた状態」

main.js
                             //⬇︎仮引数（実引数から引き渡された値が入る）
function calculateSquareArea(length) {
   //⬇︎returnで処理結果を呼び出し元に返す
   return length * length; 
}

関数の戻り値を変数に代入

呼び出し元に返ってきた戻り値9を変数resultに代入されます。
代入された変数resultは最後の行でコンソールに出力されます。
これにてコード解説を終了とします。

main.js

              //⬇︎戻り値9が返ってきている
const result = calculateSquareArea(3);

console.log(result);  //9という結果をコンソールに出力

参考リンク

関数・引数・戻り値についてまとめて説明されています
https://www.sejuku.net/blog/31671