Search code examples
javascriptpointersqueryselector

Are JavaScript variables a reference, value or pointer

A search didn't quite get me the answer I was looking for.

I am curious if setting a variable to a queryselector is a reference, pointer or value.

Example 1:

// lets assume there is only one ".class"
var element = document.queryselector(".class");

element.classList.remove("effect1");
element.classList.add("effect2");

Example 2:

document.queryselector(".class").classList.remove("effect1");
document.queryselector(".class").classList.add("effect2");

Are these exactly the same thing? Or by setting the variable to the selector, are you saving overhead?

My thought is that if the variable is a value, then the query selector won't search the DOM when the variable is used.

Hope that makes sense.

Solution

  • In Javascript objects are always passed by reference so both examples have the same effect since document.querySelector returns a DOM Element (which is an object).

    As a short FYI:

    • Primitive types are always passed by value
    • Arrays are also passed by reference

    Your first example is much more efficient because you only have to search the DOM once and there is absolutely no difference in their effect.