javascriptコードにおける想定外[実行順序][変数スコープ]

Question

初歩的な質問にて、大変失礼いたします。
Javascriptコードを作成・nodeJsで実行しているのですが、挙動に想定外がありますため、以下伺わせてください。

javascriptコード

(connection変数定義、connectは問題なく済み)

var tempNum = 0;
function countTheNum(){
  connection.query('SELECT count(*) as column1 FROM testTable', (err,rows) => {
    if(err) throw err;

    tempNum = rows[0].column1;
    console.log("!"+tempNum);
    return tempNum;
  });
  connection.end();
  return tempNum;
}

console.log("!!"+countTheNum());

console

!!0
!18935

①実行順序

関数(countTheNum)を定義したのち、末尾で呼び出しているため、コンソール出力は

!18935
!!0

になるものと理解しているのですが、こうならないのはなぜなのでしょうか・・・？
(初心者につき、今今学習中なところですが、、汗
「非同期・同期関数」をうまく使えばできる、の認識は正ですか？)

②変数スコープ

末尾の

console.log("!!"+countTheNum());

においては、0ではなく、18935が適用されていてほしいです。
javascriptの変数スコープ周りを調べて、tempNumを関数外で宣言すれば良いもの、と理解していますが、解決できていません。
どのような書き方をすれば良いのでしょうか？

何卒よろしくお願いいたします。

[追記]修正後コード(期待した結果は未得)

function sampleResolve() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(
  				connection.query('SELECT count(*) as column1 FROM table', (err,rows) => {
    				if(err) throw err;
				    tempNum = rows[0].column1;
    				console.log("!"+tempNum);
    				return tempNum;
  				})
  			);
  			connection.end();
  		}, 4000);
    })
}

async function sample() {
    const result = await sampleResolve();
    return result;
}

sample().then(result => {
    console.log("!!"+result);
});

[追記]修正後コードのコンソール

!![object Object]
!18935

完成系(※参考)

(確実に冗長すぎる書き方なので、修正は必要な認識。ただ、やりたいことは実現できたので、一応記載した次第。)

var tempNum;
function sampleResolve(testMethod) {
    return new Promise(resolve => {
        setTimeout(() => {
  			connection.query('SELECT count(*) as column1 FROM table', (err,rows) => {
    			if(err) throw err;
			    tempNum = rows[0].column1;
   				console.log("!"+tempNum);
   				resolve(testMethod(tempNum));
			})
  			connection.end();
  		}, 4000);
    })
}

function testMethod(tempNum){
	console.log("call back");
	return tempNum;
}

async function sample() {
    const result = await sampleResolve(testMethod);
    return result;
}

sample().then(result => {
    console.log("!!"+result);
});

完成系のコンソール出力(※参考)

!18935
call back
!!18935

Comments

[hoshi-takanori]

「「非同期・同期関数」をうまく使えばできる」というか、connection.query はすでに非同期処理であり、書いた順番に実行されるはずという想定 (初心者にはよくある事ですが) が間違ってるだけですね。
connection.query('SELECT count(*) as column1 FROM testTable', (err,rows) => { の (err,rows) => { から対応する閉じかっこ } まではデータベースから結果が得られた後で呼ばれる無名関数なので、そのような結果になります。

[wwwww]

ご回答ありがとうございます！基礎が理解できておらずすいません。。
(週末に書籍買って一から勉強予定です)
他の方がご記載くださっているように、そこの処理を待つように書き換えれば良いもの、と認識の上、いろいろ試して理解を深めていきたいと思います！

[hoshi-takanori]

待っては駄目です。待つんじゃなくて、結果が来たときに何をするかを記述するという考え方になります。

[wwwww]

承知いたしました。
queryの閉じカッコ"}"の直前にて、コールバック関数を呼び出して、そこでresolveを記述すれば、同期的にかけるものと、現在理解しています。これから試してみます！
ありがとうございます。

Answer 1

こうならないのはなぜなのでしょうか・・・？

クエリの処理は非同期で行われますので、connection.queryに渡した関数の処理は、countTheNumの残りのコードより後に行われます。

0ではなく、18935が適用されていてほしいです。

無理です。connection.queryに渡した関数が実行される前にcountTheNumは終了してしまいますので、元からの値である0がそのままreturnされます。

Comments

[maisumakun]

> どのような書き方をすれば良いのでしょうか？

countTheNum自体がコールバックを受け取るようにする、あるいはPromiseを返すようにする（呼ぶ側もそれを前提に使う）必要があります。単なる数値を返す形で書くことはできません。

[wwwww]

ありがとうございます！
申し訳ありませんが、追記コードまで書けたのですが、これで動作しないのは何故でしょうか…？
理解が鈍くすいません。。

[maisumakun]

sampleResolveでresolve(connection.query(略))のようにしていますが、これでは「connection.queryの返り値で充足するPromise」を返すことになります。

クエリ終了時のコールバックでresolveを呼んでください。

[wwwww]

早速のご回答、ありがとうございます！

>countTheNum自体がコールバックを受け取るようにする
「connection.query(〜=> {})」(の閉じカッコ直前?)にて、別途定義したコールバック関数を呼び、その中にresolveを書けば良いもの、と理解しました。今から試してみたいと思います！

>(あるいは)Promiseを返すようにする（呼ぶ側もそれを前提に使う）
言及なくすいません、私はこちらで書いた自己認識でおります。「呼ぶ側」であるasync function sample内でよんでいるsampleResolveにawaitをつけることで、処理が受け取れるもの、と思っておりましたが、その上では何がよくないのでしょうか…。

(週末に本などで体系だった話として理解したいと思います…
何度もご返答を頂きありがとうございます…m(_ _)m )

[wwwww]

ご回答・返答をいただいた方々、ありがとうございました。
実現したいことについては、一応解決しましたので、質問はクローズさせていただきました。
(callBack関数で非同期関数を同期的に扱っている理由、そもそももっと綺麗な書き方があるのではないか、などなど調べて理解することはありますが、諸々勉強になりました。)