# Advantages and disadvantages of chains in JavaScript

Despite the fact that the chains reduce the code, in most cases the introduction of a variable is still more convenient. Compare the two examples - now I have entered the variable `elem` and I can write any number of attributes, while `querySelector` is called only once:

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

And now I'm not introducing a new variable and so I have to call `querySelector` twice:

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

In my opinion, this code has become more complicated, although it takes one line less. Also, if I want to change the value of `id` from `'elem'` to something else, I have to do it in many places, which is not very convenient.

There is also another problem - the load on the browser. Searching for elements on the page, which is done by the `querySelector` method, is a rather slow operation (and in general, any work with page elements is a slow operation - remember this).

In our case, if we use `querySelector` every time, then the browser will process the HTML page each time and look for an element with a given `id` several times (it doesn’t matter that `id` are the same - the browser will do all the actions several times), performing useless operations that can slow down the browser.

If we use the variable `elem` - no search occurs on the page (the element has already been found and the reference to it lies in the variable).

Given the following code:

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

Point out the disadvantages of this code. Remove them.

← →
↑
en ru