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

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

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

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

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

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

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

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

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

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

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