js settimeout関数が期待どおりうごかない

Question

const okureru = (aisatu, zikann) => new Promise(resolve => setTimeout(resolve(aisatu), zikan));
okureru('konnnitiha', 5000).then(console.log)

.thenで５秒後にkonnnitihaがコンソールに表示される想定をしてましたが、、、、なぜか、実行後すぐに、コンソールにkonnnitihaと
表示されてしまいます。。。。

以前こちらのサイトに質問した際、
settimeout関数へのresolve関数を引数としての渡し方にミスがあり、

const okureru = (aisatu, zikan) => new Promise(resolve => setTimeout(()=>resolve(aisatu), zikan));

この書き方だと期待通り、動くことが判明しましたが、、、、

この意図しない動きについてですが、、、、
より詳細にドキュメントに載ってたりしますでしょうか、、、見つけられず、、、

今回の意図しない動きとしては、
setTimeout関数の仕様で、引数への値の渡し方に間違いがあったという認識でよろしいでしょうか、、、、

教えていただきたいです。

Answer 1

今回の意図しない動きとしては、setTimeout関数の仕様で、引数への値の渡し方に間違いがあったという認識でよろしいでしょうか、、、、

一部には、はい。

https://developer.mozilla.org/ja/docs/Web/API/setTimeout

まずsetTimeoutのつかいかたについての話をすると

setTimeout(console.log('konnnitiha'), 5000));

この書き方だと、第一引数に指定されたconsole.log('konnnitiha')がすぐ実行され、konnnitihaが表示されます。

そして　console.log('konnnitiha')　の戻り値 undefined がsetTimeoutに渡されるため、5秒後に表示されるものはありません。

（1つ前の質問に対するコメントでmaisumakunさんが書かれていますが、
setTimeoutに限らず、関数の実行前に、関数に指定した引数の方から先に評価（≒それが実行可能な形式であれば実行）されます。
setTimeout(console.log('konnnitiha'), 5000));
と書くと、setTimeoutという関数の実行前に、まず引数に指定した 「console.log('konnnitiha')」が評価されます。
console.log('konnnitiha') が評価されると、"コンソールに「konnnitiha」を出力する"という処理が実行され、undefinedが返ってきます。（console.log()関数の戻り値はundefinedです）
結果、 setTimeout(undefined , 5000));
として実行されるということです）


期待する動作（5秒後に"okureruを表示）をさせるには、第１引数に、「console.log('konnnitiha')という処理を実行する関数（関数オブジェクト）」を指定する必要があります。

// console.log('konnnitiha')という処理を実行する関数
function yobidashi() {
  console.log('konnnitiha');
}
// 関数オブジェクトを指定
// ※「yobidashi()」のように括弧をつけると、setTimeoutの評価の前に 
// yobidashi関数が即時実行されundefinedが返ってくるため、期待する動作にならない。
setTimeout(yobidashi, 5000);

　
これを無名関数を使って書き直すと

setTimeout(function() {console.log('konnnitiha')}, 5000);

　
これをアロー関数式を使えば

setTimeout(() => console.log('konnnitiha'), 5000);

となります。

こうすれば、「console.log('konnnitiha'）を実行する関数」を5秒後に実行することになるので、意図する動作になります。

※「console.log('konnnitiha')」 も関数ではないかと思うかもしれませんが、これを引数に指定するとconsole.log()関数を実行することになってしまうため、関数の指定とは異なります。
もしあえてconsole.logを直接指定したいならば
setTimeout(console.log, 5000, 'konnnitiha');
となるでしょう。

ここらへんは「コールバック関数」のキーワードで検索するといろいろ解説が出てきます。
たとえば下記のページ等が参考になるでしょう。
https://qiita.com/matsuby/items/3f635943f25e520b7c20

---

あとは、querykumaさんの書かれているとおりです。
Promiseの引数関数も即時実行されます。

const okureru = (aisatu, zikann) => new Promise(resolve => setTimeout(resolve(aisatu), zikan));
okureru('konnnitiha', 5000).then(console.log);

とすると、
Promiseオブジェクトの生成時、即時に setTimeout(console.log(aisatu), zikan)
が実行されますが、これは上述の通り、期待する動作となりません。

const okureru = (aisatu, zikann) => new Promise(resolve => setTimeout(()=>resolve(aisatu), zikan));
okureru('konnnitiha', 5000).then(console.log);

とすると、
Promiseオブジェクトの生成時、即時に setTimeout(() => console.log(aisatu), zikan)
が実行されます。
そしてこれはsetTimeoutの引数に 「console.log('konnnitiha'）を実行する関数）」を指定している為、期待する動作となります。

---

（※）Task Queへの登録等、Promiseの厳密な動作を考慮すると誤った言い回しがあるかもしれませんが、ここでは平易な理解のため詳細を割愛します。

Answer 2

関数をどのタイミングで実行するかという関数の仕様です。

var my_setTimeout = (my_function, time) => {
	// time時間後にmy_functionを実行する
	console.log(my_function, typeof my_function); // typeofで変数の型を調べる
	if (typeof my_function === 'function') {
		my_function(); // ()を付けることで関数を実行
	}
};

my_setTimeout(console.log(1), 1000); // my_function = undefined, typeof my_function = undefined

my_setTimeout(()=>console.log(1), 1000); // my_function = ()=>console.log(1), typeof my_function = function

resolve(aisatu)と書くことで上のconsole.log(1)のほうになっています。

Qiitaに書いた記事ですがPromiseの引数関数は即時実行されます。
https://qiita.com/querykuma/items/651b5c3c7d0deda2e610