javascript setTimeout

Question

<script>

  //処理1
  setTimeout(console.log('hoge'),4000);

  //処理2
  var hyouji = function(){
    console.log('hoge');
  }
  setTimeout(hyouji,4000);

</script>

javascriptの初歩的な質問なのですが、
上記処理1と処理2でコンソールにhogeが出るタイミングが違う理由がわかりません。

プログラムの結果
処理1は画面を開いたときにhogeがでる。
処理2は指定時間後にhogeがでる。

setTimeoutは指定時間後に処理をしますよね。
でしたら、処理1は処理2と同様に指定時間後にhogeが出ると思うのですが、違いますか？

Answer 1

setTimeoutは渡された関数を実行するので、「処理1」はconsole.log('hoge')の実行結果が関数を返さないので指定秒数後に何も実行されません。

括弧が付いたらその場で実行しますよ。

setTimeout(hyouji  ,4000); // 4000後
setTimeout(hyouji(),4000); // その場で実行

Comments

[m.ts10806]

病 になってます

[kei344]

To: m.ts10806さん
指摘ありがとうございます、修正しておきます。

Answer 2

式を解釈することをプログラミング用語で「評価」というのですが、setTimeoutの引数は即座に評価されます。

setTimeout(console.log('hoge'),4000);

↑を評価すると、console.log()が即座に実行されコンソールにhogeが表示され、その戻り値は常にundefinedなので↓になります。

setTimeout(undefined,4000);

---

一方で、

setTimeout(hyouji,4000);

↑を評価すると、変数hyoujiの中身は関数なので↓となりますが、hyouji()などのように関数を実行しているわけではないのでコンソールには表示されません。

setTimeout(function(){
    console.log('hoge');
  },4000);

---

↓ならば、即座にコンソールにhogeが表示されます。

setTimeout(hyouji(),4000);

Comments

[chako_2007]

↑を評価すると、変数hyoujiの中身は関数なので↓となりますが、
hyouji()などのように関数を実行しているわけではないのでコンソールには表示されません。

と答えてくれましたが、

setTimeout(hyouji,4000);
hyoujiは変数ですが、変数中身は関数なので

setTimeout(hyouji(),4000); これとまったく同じになるのではないでしょうか？

[Lhankor_Mhy]

つまり、たとえば、
alert()
と
alert
とが、同じ結果になる、というお考えなのですね。

試してみればすぐにわかるのですが、残念ながら、それは違います。
前者はアラートが表示され、後者はアラートが表示されません。

---

変数名の後ろに ( が記されている場合、それは関数呼び出しとして評価されます。
変数の中身が関数であろうとなかろうと、ともかくその変数に対して関数呼び出しをしようとします。

---

逆に言うと、そして大雑把に言うと、変数の後ろに ( がない場合、変数の中身が何であろうと、関数呼び出しとして評価されない、ということです。（一部に例外がありますが）

[chako_2007]

返信遅くなって、すいません。
なんとなく理解できたので、返信してもらえなくても大丈夫です。

逆に言うと、そして大雑把に言うと、変数の後ろに ( がない場合、変数の中身が何であろうと、関数呼び出しとして評価されない、ということです。（一部に例外がありますが）
のコメントについてですが、

setTimeout(hyouji,4000);
たしかに、hyoujiは関数として呼び出しされませんね。
hyoujiは展開されて
setTimeout(function(){
console.log('hoge');
},4000);
となるだけで。

--------------------------------------------------------------------------------------

各処理の実行を説明すると

setTimeout(console.log('hoge'),4000);
//console.log()関数を実行してから、4秒まつ。

setTimeout(hyouji(),4000);
//hyouji()関数を実行してから、4秒まつ

setTimeout(hyouji,4000); //これの中身は↓なので
setTimeout(function(){
console.log('hoge');
},4000);
//4秒まってから、function()を実行する。
//hyoujiを展開　→　4秒まつ　→　function()を実行する。
// function()は優先順位低いのかな？？

[Lhankor_Mhy]

まさにご理解の通りです。

[Lhankor_Mhy]

// function()は優先順位低いのかな？？

ここが気になったので、追加でコメントします。
たとえば、

setTimeout(console.log,4000);

とすれば、4秒後にコンソールに空文字列が表示されますし、

setTimeout(alert,4000);

とすれば、4秒後にアラートが表示されます。

function(){} つまり関数式が、ビルトイン関数に比べて優先順位が低い、ということではありません。

Answer 3

コールバックを指定する必要があるのでこう書きます

setTimeout(()=>console.log('hoge'),4000);

Answer 4

ご質問の処理1は以下のように考えてください。

//setTimeout(console.log('hoge'),4000);
// 以下の処理と同じ
console.log('hoge');
setTimeout(undefined,4000); // setTimeout の返却値である timeoutId がカウントアップされる

• MDN console.log() 返却値なし（undefined）
• MDN setTimeout() に示される３つめの例文（code が何もない）になります。