if文の実行順序について

Question

JavaScript の基本の「image changer を追加する」にあるコードについてなのですが

var myImg = document.querySelector('img')

myImg.onclick = function () {
  var mySrc = myImg.getAttribute('src')

  if (mySrc === 'images/firefox-icon.png') {
    console.log(myImg) // firefox-icon2.png ...①
    console.log(mySrc) // firefox-icon.png ...②
    myImg.setAttribute('src', 'images/firefox2.png') // ...③
  } else {
    myImg.setAttribute('src', 'images/firefox-icon.png')
  }
}

③を実行する前に、console.logで①と②の中身を見てみました。
予想では①と②の両方ともfirefox-icon.pngだと思っていたのですが、
①だけfirefox-icon2.pngでした。

何故①は③の実行前なのに、console.logで中身を見たときに既にfirefox-icon2.pngになっているのでしょうか。

初歩的な質問ですみません。
回答よろしくお願いします。

Comments

[Lhankor_Mhy]

試していただきたいことがあります。console.log( myImg.cloneNode(true) ); とするとどうなりますか？

[退会済みユーザー]

その場合だと <img src="images/firefox-icon.png" alt="The Firefox logo: a flaming fox surrounding the Earth."> が返ってきました。

[Lhankor_Mhy]

では、kreiさんの回答のとおりですね。以前に、私も類似の質問に回答しています。https://teratail.com/questions/5420

[退会済みユーザー]

Lhankor_Mhyさんの過去の質問にあるコードを実際に動かしてみました。私が使っているブラウザはSafariで、最初からWebインスペクタのコンソールを表示した状態でconsole.log(a)を確認すると正しく表示されたのですが、「console.log(a)実行→Webインスペクタのコンソールを開いて確認」の順だとLhankor_Mhyさんの質問にあったような挙動が確認できました。これは、kreiさんの回答にある「コンソールを確認した時点での値を表示する」に確かに当てはまっており、今回のconsole.logの挙動を理解するのにすごく助かりました。有難うございました。

Answer 1

全て通ってからではなく、２の段階でブレークポイントで止めてmyImgの中を見てみてください。
おそらく期待通りのものが入っています。
Javascriptのブレークポイントの設定はGoogleChromeならデベロッパーツールのSourceタブの該当行番号をクリックすることで可能です。デベロッパーツールの便利な機能については検索すればたくさん解説記事がヒットするのでここでは紹介しません。

console.logは常にconsole.logのある位置の変数内容が表示できるわけではありません。
私も何度も騙されたことがありますｗ

追記

この現象はオブジェクトに対して起こります。console.logに表示される値はコード上のconsole.logのある場所ではなく、ブラウザのコンソールに表示したタイミングでどのような値を持っているかが表示されます。つまりconsole.logの位置より後に代入の行があったとしてもコンソール上で確認するまでに変更が行われた場合変更後の値を目にすることになります。ブレークポイントでは処理自体を止めているので確認までに値が変わることはありません。

この現象のわかりやすい確認方法としては、次の方法があります。
GoogleChromeだとArrayやObjectをコンソール上にだすと、まず1行で変数内容が簡単に表示されており、▶がついていてそれをクリックすると内容を展開して見ることができますよね、これを利用します。
その展開内容も▶が押されたタイミングに変数がどのような値を保持しているかを表示するので1行目の簡易表示と展開内容が違う、なんてことが起こります。

次のようなコードをコンソールに入力してみてください。

var obj={"bool":true}

console.log(obj);

setTimeout(function(){
    obj.bool=false;
}, 5000);

コンソールには次のように表示されていますよね。

▶Object {bool: true}

すぐに▶を押して開くと次のようになります。

▼Object {bool: true}
bool:true
▶__proto__:Object

次にもう一度示したコードをコンソールに入力し、5秒以上経ってから▶を押してください。
次のようになるはずです。

▼Object {bool: true}
bool:false
▶__proto__:Object

Comments

[退会済みユーザー]

回答有難うございます。
もし宜しければもう少し教えてください。

回答の通り、ブレークポイントで止めてから確認したところ予想通りの値が入っていました。

「console.logは常にconsole.logのある位置の変数内容が表示できるわけではない」←この部分が調べても出てきません。
何故「console.logは常にconsole.logのある位置の変数内容が表示できるわけではない」のですか？
何故ブレークポイントで止めたときとそうでないときとでは結果が違うのですか？

jsの処理の順番によってconsole.logの表示内容が変わるのかと思い調べたのですが、私の調べた限りではそのような記事は見つけられませんでした、、代わりにsetTimeoutの「指定時間後に処理が実行されるのではなく、実行キューに登録されてから処理が実行される」という記事を見つけて読んだのですが、それは今回のconsole.logの話とはまた別ですよね。

もし良ければ、console.logの変数の表示内容が変わる理由について教えていただきたいです。
よろしくお願いします。

[krei]

回答に詳細を追記しましたのでご確認ください。

[退会済みユーザー]

追記有難うございます！
追記にあったコードを試したところ、確かにtrueだったのがfalseに表示が変わっていました。setTimeoutについて調べたときに似たコードを見たのですが、kreiさんの
「ブラウザのコンソールに表示したタイミングでどのような値を持っているかが表示される」
「コンソール上で確認するまでに変更が行われた場合変更後の値を目にすることになる」
↑この部分でやっと今回のconsole.logの挙動について理解することができました。
追加の質問にも答えていただき、本当に有難うございます。