Ketjutuksen edut ja haitat JavaScriptissä

Huolimatta siitä, että ketjutus lyhentää koodia, useimmissa tapauksissa muuttujan käyttöönotto on kuitenkin kätevämpi. Vertaa kahta esimerkkiä - nyt olen ottanut käyttöön muuttujan elem ja voin asettaa minkä tahansa määrän attribuutteja, samalla kun querySelector kutsutaan vain kerran:

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

Nyt en ota käyttöön uutta muuttujaa ja siksi minun täytyy kutsua querySelector kaksi kertaa:

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

Mielestäni tästä koodista tuli monimutkaisempi, vaikka se viekin yhden rivin vähemmän. Lisäksi, jos haluan vaihtaa id-arvon arvosta 'elem' johonkin muuhun, minun täytyy tehdä se monessa kohdassa, mikä ei ole kovin kätevää.

On myös toinen ongelma - kuormitus selaimelle. Elementtien etsiminen sivulta, jota metodi querySelector tekee, on melko hidas operaatio (ja yleisesti ottaen mikä tahansa työskentely sivun elementtien kanssa on hidas operaatio - muista tämä).

Meidän tapauksessamme, jos käytämme querySelector joka kerta, selain joutuu käsittelemään HTML-sivun ja etsimään elementtiä annetulla id:llä useita kertoja (ei väliä, että id on sama - selain suorittaa kaikki toimenpiteet useita kertoja), tehden hyödyttömiä operaatioita, jotka voivat hidastaa selaimen toimintaa.

Jos taas käytämme muuttujaa elem - mitään etsintää sivulta ei tapahdu (elementti on jo löydetty ja viite siihen on tallennettuna muuttujaan).

Annettu seuraava koodi:

<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);

Osoita tämän koodin puutteet. Korjaa ne.