JSで条件分岐を無視して値が入ってしまいます

Question

###実現したいこと
以下条件を実現したいです。

【ケース１】.item_linkに子要素が存在するとき
→linkDataに値を入れたい

【ケース２】.item_photosに子要素が存在するとき
→photoDataに値を入れたい

※ちなみに.item_linkと.item_photosは片方しか存在しません。

###発生している問題
かなり謎な現象です。

ケース１と２はis_linkとis_photoで条件分岐しているのにも関わらず、どちらのケースでもlinkDataとphotoDataの双方に値が入ってしまいます。

###該当のソースコード
以下を実行してみてください。ケース２です。

.item_photosにしか子要素は存在しませんので、判定は問題なく
is_link = false
is_photos = true
とコンソールに出ます。

しかし、linkDataとphotoDataの双方に値が入ってしまうといった現象です。

<div class="list">
  <button type="button">button</button>
  <div class="item_link">
    <!-- <div class="box" data-box='{"name":"taro","id":"1"}'></div> --> 
  </div>
  <div class="item_photos">
    <img src="" data-photo_id="10"><img src="" data-photo_id="20">
  </div>  
</div>

$(document).on('click','button', function(){

	const $list = $(this).closest('.list');

	let linkData = photoData = [];
	
	const is_link = $list.find('.item_link').children().length === 0 ? false : true;
	const is_photos = $list.find('.item_photos').children().length === 0 ? false : true;			
	console.log('is_link = ',is_link);
	console.log('is_photos = ',is_photos);
	
	if( is_link && ! is_photos ){
		const data = JSON.parse( $list.find('.item_link .box').attr('data-box') );
		const a = {
			id  : data.id,
			name: data.name
		};
		linkData.push( a );
	}else if( ! is_link && is_photos ){
		$list.find('.item_photos img').each(function(){
			const b = {
				id  : $(this).attr('data-photo_id'),
				name: 'his'
			};
			photoData.push( b );		
		});
	}

	console.log('linkData = ',linkData);
	console.log('photoData = ',photoData);

});

###試したこと
上記の通りですがis_linkとis_photoでの判定をコンソールに出すということを試しまして、これできちんと判定できているのに、なぜ？といった感じで、ほかに試すことが思いつきません。

あとはHTMLのコメントアウトを逆にしました↓が、すると逆の値が双方に入りました。

<div class="list">
  <button type="button">button</button>
  <div class="item_link">
    <div class="box" data-box='{"name":"taro","id":"1"}'></div>
  </div>
  <div class="item_photos">
    <!-- <img src="" data-photo_id="10"><img src="" data-photo_id="20"> --> 
  </div>  
</div>

わけがわからないです…

###jQeuryバージョン
上記は3.4.1の最新ですが、バージョンはあまり関係なく古いものでも同様でした。

###解決策？
無理やりもう一方を初期化すると解決しました↓が、そもそも初期化しないといけないことに納得できません。条件分岐を超えてしまうことが問題なので、その点での解決策を知りたいです。

アドバイス宜しくお願いいたします。

    if( is_link && ! is_photos ){
        const data = JSON.parse( $list.find('.item_link .box').attr('data-box') );
        const a = {
            id  : data.id,
            name: data.name
        };
        linkData.push( a );
        photoData= []; // もう一方を初期化
    }else if( ! is_link && is_photos ){
        $list.find('.item_photos img').each(function(){
            const b = {
                id  : $(this).attr('data-photo_id'),
                name: 'his'
            };
            photoData.push( b );    
        });
        linkData = []; // もう一方を初期化
    }

Answer 1

let linkData = photoData = [];

このようにすると、両者には同じ配列オブジェクトが代入されます。片方に値を追加すれば、それはもう片方でも影響してしまいます。let linkData = [], photoData = [];のように別に配列を作ってください。

Comments

[mezamashiTV]

どうもありがとうございます。これは知りませんでした…。
異なる名前なのに、同じオブジェクトとして扱われるということですよね？
どのようなメリットや使い道があるのでしょうか。混乱するだけのように思いませんか？

[maisumakun]

C++とPHP（配列はオブジェクト型と全く別扱い）を除いて、配列がオブジェクトとして扱われる言語の多くにこのような挙動は共通します。

[amadablam]

横から失礼。「異なる名前なのに、同じオブジェクトとして扱われる」というよりも「同じオブジェクトに異なる名前を付けている」コードを書いているからそうなるだけです。オブジェクトの代入という考え方が誤解を生みます。「オブジェクトの参照」の代入と考えれば筋が通るでしょう。

[mezamashiTV]

maisumakun様
そうなのですね。ありがとうございます。多言語に行く際には注意いたします。

[mezamashiTV]

amadablam様
なるほどありがとうございます。
それにしても「同じオブジェクトに異なる名前が付けられること」というのは、どのようなメリットがあるのでしょうか。
私としては「異なる名前をつけたら、後者の名前で上書きされる」という挙動の方がわかりやすいような気が致します。

[Daregada]

後者の名前で上書きされるとは、前者の名前ではアクセスできなくするということかな。それでは困る場合が大量にあるので、多くのプログラミング言語ではそういう設計にはなっていません。

[amadablam]

a = b = {}; のコードでは オブジェクト {} の参照（メモリ･アドレス）が変数 b に代入され、変数 b の値（つまり {} の参照）が 変数 a に代入されます。「代入式の両辺は等しい」ことを考えると、この a, b, {} がすべて同じなのは論理一貫していて「わかりやすい」と思うのですが。a = b = {}; のコードは、b = {}; a = b; と2つに分けて考えることができますが、これは b = {}; function f(a) {} というコードがあったときに f(b); のように f関数に実引数 b を渡して呼び出すことと等価です。ここでf関数内では a という名前で元の {} を扱うことができ、関数呼び出しが戻れば、呼び出し側のコードで同様に {} を扱うことができます。オブジェクト指向において厳密な実体を指す意味では、オブジェクトとは「インスタンス」であり、インスタンスとは「一意な実体」としてシステムの中で文字通りユニークな存在として扱われるのが自然な考え方です。インスタンスのコピーを作成して、コピーのみに何か操作をするというのはむしろ自然ではないでしょう。現実世界で言えば、あちこちにクローンが存在してしまうような状況ですよね。