JavaScript console.logの初歩的な質問 関数の読み込みの流れ

Question

JS、console.logについて学習中の初心者です。例題で出くわした以下のサンプルコードの内容が理解できないためどなたか解説をお願いできないでしょうか。
（関数や変数など基礎的なところは学習済みですが、根本的な理解が誤っているかもしれません）

発生している問題・エラーメッセージ

わからないこと
１、なぜconsole.log(val);の値が２になるのか
２、console.log(sample(2))の２の意味
３、var value と　valは別の関数として考えていいのか
４、そもそもどのように計算していけば良いのか分かりません。。。

（（（（（（JavaScript））））））

<script>
         var value = 10;
         function sample(val){
         console.log(val); 
         val = val*2;
         return val;
         console.log(val);
        }
          console.log(sample(2));
          if(value === 10){
          console.log('true'); 
          value = sample(value);
        }else{
          console.log('false'); 
        }
        var result = 0
        for(var i = 0; i < 10; i++){
          console.log(i); 
          result = sample(value);
          console.log(result);
       }

試したこと

デベロッパーツール内で色々と試しましたがよくわかりませんでした。
抽象的な質問で申し訳ありませんが、質問できる人がおらず困っています。
どうかよろしくお願いいたします。

Comments

[kei344]

（質問文は編集できます）質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[muumuuland]

ご指摘ありがとうございます。
訂正させていただきました。

[querykuma]

例題のプログラムは問題が複雑に絡み合っています。
問題を切り分けて単純にしなければ決して理解できません。

絡み合ったスパゲッティをほどいて１本にしてください。

わからないことを４つも書いていることが問題を複雑にしています。
４つのわからないことを切り分けて４つのteratailの質問にされたほうがあなたの問題を解決できます。
それぞれのteratailの質問では別のサンプルコードを用意しましょう。

「１、なぜconsole.log(val);の値が２になるのか」のサンプルコードは

function sample(val){
console.log(val);
}
sample(2);

だけでいいはずです。

[muumuuland]

ご指摘ありがとうございます。
分からない事が多すぎて、このような質問となってしましました。
少し整理して考えてみます。ありがとうございます。

Answer 1

１、なぜconsole.log(val);の値が２になるのか

sampleという関数の1つ目の引数に2が渡されたので、valが2になっています。

２、console.log(sample(2))の２の意味

sampleという関数の1つ目の引数に2を渡すときの構文です。

３、var value と　valは別の関数として考えていいのか

valueとvalは関数ではなく変数です。
関数は引数と処理、戻り値がセットになっているものです。
掲示されたコードで言うとsampleのことです。

４、そもそもどのように計算していけば良いのか分かりません。。。

「関数や変数など基礎的なところは学習済み」と仰っていますが、変数と関数の区別がついていない様子から学習が足りていないように伺えます。書かれているコードが良く分からない原因はそこではないでしょうか。

掲示されたコードは変数や関数、条件分岐(if)、繰り返し処理(for)をしっかり学習されていれば必ず読めるはずです。

プログラミングにおける学習で大事なことは情報のアウトプット、すなわち人に説明できることです。
なぜなら、情報のインプット(学習)ができていなければ情報のアウトプット(説明)はできない、できるはずがないからです。

muumuulandさんは関数や変数が何かを人に説明できるでしょうか。
もし説明できないのであれば、まずは最低限下記のようなポイントを抑え、説明ができるまで学習し直しましょう。

• 変数と関数の違い
• 変数や関数があることでどう嬉しいのか(逆にそれ等が無いとどう困るか)

学習を終えた後、muumuulandさんが掲示されたコードと私や他の方が回答した１~３の内容を再度読んでください。

Answer 2

１、なぜconsole.log(val);の値が２になるのか

その部分を通った時にvalには２が入ってたから。
コードの最初の部分の話をしているんであれば、sample関数は引数valに２を指定して呼び出されてる。

２、console.log(sample(2))の２の意味

sample関数を引数２を指定して呼び出し、その戻り値をconsole.logを使って出力。

３、var value と　valは別の関数として考えていいのか

どちらも関数ではない。

４、そもそもどのように計算していけば良いのか分かりません。。。

何の計算の話なのかわかんない。