ウェブカツ javascript・jQuery部入門 の理解度チェック（関数）の僕なりの理解

ウェブカツ　javascript・jQuery部入門 の理解度チェック（関数）の僕なりの理解:

javascript・jQuery部の理解度チェック（関数）※ネタバレあり

ウェブカツでプログラミングの勉強をしています。

見出しの問題が全く解けず、他の生徒さんの質問を読んでも解けず（笑）、

5時間くらいかけて自分の中で腑に落ちる説明ができるようになりました。

間違えているかもしれませんので、ご指摘等あればお願いいたします。

あと、本文では「＜」を大文字にしてあります。

コピーしたいときは半角に直してください。

※答えを知りたくない方は最後まで読まず、考えてみてください。

問題

＜script>

var result = 0;

function add(num){

return ++num;

}

for(var i = 1; i < 5; i++){

result += add(i);

}

＜/script>

のコードを実行したら、変数resultは最終的にいくつになるでしょうか？

という問題です。

ヒントを読んでもわからず。

前のlessonを読んでもいまいちわからず。

そもそも僕の基礎知識が足りてなかったので一から調べました。

わからなかった基礎知識

わからなかったこと

* 引数、戻り値

*　function

*　var

*　add

*　++num

【引数、戻り値、function】　　

引数（ひきすう）は、何かを作るときの材料となるもの。

戻り値とは、引数を使ってできあがったもの。returnのあとのもの。

と解釈しました。

ヤフー知恵袋でわかりやすい説明がありました。

その方は海水を真水に変える装置を例に出していました。

それをお借りして、javascriptの「関数」の形にすると

function 海水を真水に変えるプログラミング（海水）｛

　//真水に変える

　return 真水；

｝

となります。

function:関数を定義するのに必要なもの。

海水を真水に変えるプログラミング：関数

海水：引数

真水：戻り値

とすると、関数がわかりやすくなりました。

【var】

varは「変数」の宣言です。

つまり

var value = 1;

というのは

「valueに１を代入することを宣言します。」

という意味になります。

【add】

これは関数の一つで、

「加えるというプログラム」だと解釈しました。

【++num】

numが１増える（インクリメントする）、という意味。

このインクリメント（++）が変数の前につく場合と

後ろにつく場合があります。

①++num:前置演算子。numに加算してから出力される。

②num++:後置演算子。出力されてからnumに加算される。

　

以下の例文を入力してもらうと前置と後置の違いがわかると思います。

---

＜script tipe="text/javascript">

var a=8;

document.write(a++);

document.write("〈BR>");

document.write(a);

document.write("〈BR>");

document.write(++a);

＜/script>

---

aを8と定義し、

document.write(a++);

と入力すると、8が出てきます。

これは後置演算子だと

加算する前に行を出力し、その行を出力し終わった後に加算されるからです。

なので

document.write(a);

の結果を見ると9が出てきます。

そして

document.write(++a);

を入力すると、10が出てきます。

前置演算子だと

加算が行われたあと、その行を出力します。

ここまでの知識があると、理解度チェックの問題も解きやすくなるかと思います。

問題を読んでみる

＜script>

var result = 0;

function add(num){

return ++num;

}

for(var i = 1; i < 5; i++){

result += add(i);

}

＜/script>

のコードを実行したら、変数resultは最終的にいくつになるでしょうか？

この問題をなんとか日本語にしたい。

var result = 0; 　　　　 ①変数resultに0を代入する、という宣言

function add(num){　　　②引数（材料）numを使い、addという関数を使いますよ、という宣言

return ++num;　　③引数（材料）numを使い、出来上がったものはnumに1を増やします。

for(var i = 1; i < 5; i++){　　④ただし条件があり、for文内のことを繰り返し行う必要があります。

result += add(i);　　　⑤変数result＝result + add(i)です。

}

という風になるでしょうか。

プログラムは上から順番に処理されるのですが、人間にもわかるように日本語の順番を並び替えると

①変数resultに0を代入する、という宣言

②引数（材料）numを使い、addという関数を使いますよ、という宣言

④ただし条件があり、for文内のことを繰り返し行う必要があります。

⑤変数resultはresult + add(i)です。

③引数（材料）numを使い、出来上がったものはnumに1を増やします。

という並び。

④のfor文の中を整理すると

* iを1とする（初めの1回だけ）。

* 5未満（5は含まない）まで繰り返す。

* ループ毎の一番最後に変数iをインクリメントする（1増やす）。

なので④の中で、上記３つ（２回め以降は下２つのみ）を定義し直しつつ

④→⑤→③の順番で計算をしていく。という流れになります。

ここで大事なのが

add(num)という関数は、add(i)のコピーだということです。

関数addを実行する、と②で宣言してますからね。

講師の方が言っていた

「add関数を実行した結果の値と、

変数resultの箱の中から取り出した値とをプラスし、

変数resultの箱に入れ直す。」

という意味がわかれば解けると思います。

（僕は解いてから意味がわかりました。）

解き方

実際に僕の解き方を書いておこうと思います。

i = 1のとき

result += add(i);は分解すると

result＝result + add(i)

また、result=0と宣言されているので

result＝０+１＝１

return = ++numなので

１＋１＝２

したがって、引数（材料）１のとき、戻り値（できあがったもの）は２になる。

④のfor文より、

「i++」となっているので

i = 1+1=２

i = 2のとき

上の計算で

resultは０じゃなくて１になっています。

result＝１＋２＝３

return = ++numなので

３＋１＝４

したがって、引数（材料）２のとき、戻り値（できあがったもの）は４になる。

というように、繰り返しをi=4までやります。

そうすると答えが出てきます。

引数と戻り値を意識すると結構解きやすくなりますね。

正直、ここを理解するのも１日かかっています。

亀の歩みのようなペースですが、頑張って勉強していきます。