Why store the result of getElementById() to a variable instead of using the function everytime?

Question

Consider this code:

function changeImage()
{
    var image = document.getElementById('myImage');
    if (image.src.match("bulbon"))
    {
        image.src = "pic_bulboff.gif";
    }
    else
    {
        image.src = "pic_bulbon.gif";
    }
}

I do not understand why this stores the result of getElementById() to a variable that is then used in the if statement as we can access the attribute src by simply using getElementById() everytime, like so:

function changeImage()
{
    if(document.getElementById("myImage").src=="pic_bulboff.gif")
    {
       document.getElementById("myImage").src="pic_bulbon.gif";
    }
    else
    {
        document.getElementById("myImage").src="pic_bulboff.gif";
    }
}

Why use a variable instead of using getElementById() repeatedly ?

You wrote the same in one less line still it's 57 Bytes more now in size! — marekful, Jul 18 '15 at 09:17
[DRY](https://en.wikipedia.org/wiki/Don't_repeat_yourself)?! — Bergi, Jul 18 '15 at 10:11
@vinay The number of Bytes are the number of characters (well, ASCII or 1 codepoint [unicode characters](http://stackoverflow.com/questions/5290182/how-many-bytes-does-one-unicode-character-take)) including new lines and other control characters in a file. So if you put the two above examples in two files, that's about how many Bytes those two files' size will differ. — marekful, Jul 20 '15 at 12:17

score 1 · Accepted Answer · answered Jul 18 '15 at 09:19

1

var image = document.getElementById('myImage'); returns an object by reference and saves 2 extra "searches" for the same image which is slower and consumers more processor resource as it will be in your second example.

more aproppriate is to do that:

    <script>
    function changeImage()  {
        var image = document.getElementById('myImage');
        if (image) { image.src = image.src.match("bulbon")?"pic_bulboff.gif":"pic_bulbon.gif"; }
    }  
</script>

answered Jul 18 '15 at 09:19

Reflective

3,854
1
13
25

@vinay Please read about JavaScript Objects, built-in methods, design patterns etc, Instead of asking others to explain. I already gave you a link, but here it is again., [String.protype.match](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/match) – cswl Jul 18 '15 at 09:28
http://www.w3schools.com/jsref/jsref_match.asp ... matches a string presence in other string ... can use regex inside ... so in your case it maches if the string contains `bulbon` – Reflective Jul 18 '15 at 09:30
Returns an object. Period. "by reference" is a misnomer. – user2864740 Jul 18 '15 at 09:32
all objects in JS are returned by reference, so you can change their properies ... if it was a string ... image.src for example it is returned by value so even if you assing it to a variable and change it, you will change the varaible, not the primary source ... that's what I wanted to say – Reflective Jul 18 '15 at 09:34
@user2864740 Not in this case. document.getElementById() returns a reference to the element by its ID. – cswl Jul 18 '15 at 09:44
@cswl Look up "reference" in the ECMAScript specification. There is no supporting terminology in JavaScript. A "reference" is an implementation detail, often wrongly attributed to behavior (look up Calling Conventions on Wikipedia, eg.) and is just as much of a misnomer to use for return values. An object is itself. Period. – user2864740 Jul 18 '15 at 09:53
JS is just an immplementation of a programming language which is based on common concepts which can have different names in different languages, but all the mean the same. – Reflective Jul 18 '15 at 10:03
@cswl - `by reference` means you receiva e reference to an Object or other type of structure. `by value` means you get the value i.e. the structure you are accessing is copied on the time of assigning (accessing). so by ref you can do `image.src += '.jpg'` and src is changed ... but if you do `var a = image.src; a += '.jpg';` just `a` is changed not the content in `image.src` – Reflective Jul 18 '15 at 10:09
@cswl `document.getElementById()` returns an Object (HTMLElement commonly) and all Objects in JS are passed by reference, so you have a reference to the Object not a copy (clone) of it. – Reflective Jul 18 '15 at 10:13

Why store the result of getElementById() to a variable instead of using the function everytime?

1 Answers1