【Callstack】なぜ戻り値が違うの理解できません | コールスタック

Question

解決したいこと

同じ結果のように思えるのに、なぜ戻り値が違うのかを知りたい

学習状況

初学者

コード

コールスタックを勉強していて、なぜ以下2つの戻り値が違うのか理解できない。

function callStack() {
    console.log('hello');
    return 'hi';
  }

  console.log(callStack()); // hello, hi
  console.log(callStack()); // hello, hi

  function callStack() {
    console.log('hello');
    return 'hi';
  }

  let x = callStack();

  console.log(x); // hello, hi
  console.log(x); // hi

質問

1. なぜ関数を変数に代入すると、helloが一回した表示されないのでしょうか？
2. helloとhiはどちらも代入されないのでしょうか？
3. returnのhiしか代入されないのなら、なぜhelloが表示されるのでしょうか？

最後に

もし参照できる記事や解説動画などありましたら、
解決策と一緒に教えていただけると助かります。
よろしくお願いします。

Answer 1

returnのhiしか代入されないのなら、なぜhelloが表示されるのでしょうか？

関数内でconsole.logを実行しているからです。

  function callStack() {
    console.log('hello');
    return 'hi';
  }

  let x = callStack(); // この行でhelloが出力される

  console.log(x); // hi
  console.log(x); // hi

Comments

[maisumakun]

> なぜ関数を変数に代入すると、helloが一回した表示されないのでしょうか？

関数を1回しか呼ばないからです。

> helloとhiはどちらも代入されないのでしょうか？

はい、hiしか代入されません。

[退会済みユーザー]

> maisumakunさん
ご回答ありがとうございます。理解できました。

1. let x = callStack();　で　hello が出力される
2. hi が x に代入される
3. console.log(x); で hi が出力される
4. もう一度 console.log(x); すると 代入された hi が出力

Answer 2

なぜ関数を変数に代入すると、

というところから間違っています。

let x = callStack();は、関数を変数に代入しているのではなくて、関数を呼び出してその関数からreturnで返された値を変数に代入しています。

関数を変数に代入するというのは、こういうことです。

  let x = callStack;

  console.log(x()); // hello, hi
  console.log(x()); // hello, hi

Answer 3

回答は出ていますので、考え方について

コールスタックは関数が呼ばれて結果を返すまで、どの関数を実行しているのかを覚えておくLIFOです。
プログラマ視点では「デバッグしやすくなる」特徴があります
（同ページ内関連項目のスタックや コールスタック も参照）。

このような仕組みを考えるとき、「関数の呼び出し」と「関数の処理結果（返り値）」とを分けて考えてください。