Javascriptでimgのsrcを変更する方法について

Question

前提

サムネイル画像をクリックすると大きな画像のsrcを変更する時の方法の違いについて

疑問に思っていること

document.getElementById("big_div4").src　を宣言してから代入すると
うまく表示されない理由を知りたいです。
（パターン１だと動かないが、パターン２だと動く）
自分の認識では、パターン１とパターン２は同じことを
書いていると思っています。

パターン１だと動かない
パターン２だと動く
パターン３　見つけたその他の方法

該当のソースコード

  <div id="big_div3">
    <img src="img/img-01.jpg" id="big_div4">
  </div>

  <div class="thumb_block3" id="thumb_block_id2">
    <div class="thumb_div" data-box="1">
      <img src="thumb-1.jpg" alt="">
    </div>
    <div class="thumb_div" data-box="2">
      <img src="thumb-2.jpg" alt="">
    </div>
    <div class="thumb_div" data-box="3">
      <img src="thumb-3.jpg" alt="">
    </div>
  </div>

<script>
$(function(){
  $(".thumb_block3 div").on("click", function() {
    let main_src = $("#big_div3").children("img").attr('src');
    let click_data = $(this).data("box"); 
    let s_src = main_src.slice(-5,-4);
    let result = main_src.replace(s_src,click_data);
    let big = document.getElementById("big_div4").src; 

    big = result; //動かない　パターン１
    document.getElementById("big_div4").src = result; //動く　パターン2
    $("#big_div3").children("img").attr('src' , result); //動く　パターン3

  });
});

</script>

Answer 1

let big = document.getElementById("big_div4").src;
big = result; //動かない　パターン１

パターン１はdocument.getElementById("big_div4").src自体がString値なので
それを受けた変数bigは単なるプリミティブであり書き換えてもbigの値が変わるだけです

document.getElementById("big_div4").src = result; //動く　パターン2

パターン２はオブジェクトのプロパティを変更しているのでオブジェクト自体の状態が変更します

<img id="big_div4">
<script>
let big = document.getElementById("big_div4").src; 
console.log(typeof document.getElementById("big_div4")) //Object
console.log(typeof document.getElementById("big_div4").style) //Object
console.log(typeof document.getElementById("big_div4").src) //String
console.log(typeof big) //String
</script>

ただしDOMのプロパティは必ずしもプリミティブではないのでご留意ください

Comments

[mosamosadon88]

ご回答ありがとうございます。
たしかに今回の場合、変数にいれたら単なる文字列になるなるだけですよね…
よく考えればわかるはずですが、一人で考えていると中々思い至らないのが難しいですね。

Answer 2

    let big = document.getElementById("big_div4").src; 

代入文は、「左辺の変数を右辺と同じように扱えるようにする」ではなく「右辺の計算結果を左辺の変数に入れる」です。この場合は変数bigの内容は "img/img-01.jpg" という文字列になるでしょう。文字列が入った変数の値を変更しても、big_div4 要素に影響を与えることはできません。

    let big = document.getElementById("big_div4"); 
    big.src = result;

要素を変数に入れて、そのプロパティを変更することは可能です。

Comments

[mosamosadon88]

ご回答ありがとうございます。
「左辺の変数を右辺と同じように扱えるようにする」ではない　　というのがとてもしっくりくるものでした。単純に同じものぐらいに考えていましたが、今後の勉強も深まりそうです。

[yambejp]

>単純に同じものぐらいに考えていました

オブジェクトの場合左辺を右辺と同じものにすることになるので注意してください
const a=b=new Object
a.x=1
b.x=2
console.log(a.x) //２
となりaとbは完全に同値です

[mosamosadon88]

＞オブジェクトの場合左辺を右辺と同じものにすることになるの

なるほど、オブジェクトの場合は同じものとして認識になるということですね。
単純なものではなく状況によって変わるので難しいですね。

[yambejp]

>単純なものではなく状況によって変わるので難しい

オブジェクトかプリミティブかの違いなので私が回答したとおりです。
たとえばこんな感じの処理も可能です（なにも役には立ちませんが）

const a=new Object;
a.a=a;
a.b=100;
a.a.a.b--;
console.log(a.a.a.a.a.a.a.a.a.b);//99