Ventajas y desventajas del encadenamiento en JavaScript
Aunque el encadenamiento reduce el código,
en la mayoría de los casos introducir una variable
es más conveniente. Comparemos dos ejemplos:
ahora he introducido la variable elem y puedo
establecer cualquier cantidad de atributos,
mientras que querySelector se llama solo
una vez:
let elem = document.querySelector('#elem');
elem.value = 'www';
elem.type = 'submit';
Y ahora no introduzco una nueva variable, por lo que
tengo que llamar a querySelector
dos veces:
document.querySelector('#elem').value = 'www';
document.querySelector('#elem').type = 'submit';
En mi opinión, este código se volvió más complejo, aunque
ocupa una línea menos. Además,
si quiero cambiar el valor de id
de 'elem' a otro, tendré que
hacerlo en muchos lugares, lo cual no es muy conveniente.
Hay otro problema: la carga en el navegador.
La búsqueda de elementos en la página que realiza
el método querySelector es una operación bastante
lenta (y en general, cualquier trabajo
con elementos de la página es una operación lenta
- recuerden esto).
En nuestro caso, si usamos
querySelector cada vez, el navegador
procesará el código HTML de la página y buscará
el elemento con el id dado varias veces
(no importa que el id sea el mismo - el navegador
realizará todas las acciones varias veces), haciendo
operaciones innecesarias que pueden ralentizar
el funcionamiento del navegador.
Si usamos la variable elem,
no se produce ninguna búsqueda en la página
(el elemento ya está encontrado y la referencia a él está guardada
en la variable).
Dado el siguiente código:
<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);
Indique las desventajas de este código. Corríjalas.
