JavaScriptにおけるチェーンの利点と欠点

チェーンがコードを短縮するとはいえ、ほとんどの場合、変数を導入した方が結局は便利です。二つの例を比較してみてください。今、私は変数 elem を導入し、任意の数の属性を設定できています。その際、querySelector は一度だけ呼び出されています：

let elem = document.querySelector('#elem');
elem.value = 'www';
elem.type  = 'submit';

次に、新しい変数を導入せず、そのため querySelector を二回呼び出さなければならない例です：

document.querySelector('#elem').value = 'www';
document.querySelector('#elem').type  = 'submit';

私の考えでは、このコードは一行短くなっていますが、より複雑になりました。さらに、もし id の値を 'elem' から別のものに変更したい場合、多くの場所で変更しなければならず、あまり便利ではありません。

もう一つの問題は、ブラウザへの負荷です。 querySelector メソッドが行うページ内の要素の検索は、かなり遅い操作です（そして一般に、ページ要素に対する操作はどれも遅い操作です - これを覚えておいてください）。

今回のケースでは、毎回 querySelector を使用すると、ブラウザは毎回HTMLページを処理し、指定された id を持つ要素を複数回探します（id が同じでも構いません - ブラウザはすべての動作を複数回実行します）。これは無駄な操作であり、ブラウザの動作を遅くする可能性があります。

一方、変数 elem を使用する場合 - ページ内の検索は一切行われません（要素は既に見つかっており、その参照が変数に格納されています）。

次のコードが与えられています：

<img id="image" src="avatar.png" width="300" height="500">

console.log(document.querySelector('#image').src);
console.log(document.querySelector('#image').width);
console.log(document.querySelector('#image').height);

このコードの欠点を指摘してください。それらを修正してください。