Question

I have the following code:

function show(){
    var a=document.getElementById('somediv').style.display;
    a="block";
}

The above code does not work, it works if we use

 {
     var a=document.getElementById('somediv');
     a.style.display="block";
 }

What is wrong with the above code?

Answer 1

To understand this, you will need to understand a bit about javascript assignments.

There are two types of assignment in javascript when you use the = operator: assignment by value and assignment by reference. While some languages give you a choice of which type of assignment you use at any given time, javascript does not give you a choice. It has a strict set of rules for when it uses each.

An “assignment by value” means that a specific value like the number 3 or the string "none" is assigned into another variable.

An “assignment by reference” means that a pointer to the other variable is placed into your new variable and any edit of the contents of that object will be reflected in both places.

For simple types like strings and numbers and booleans, javascript ALWAYS uses assignment by value. For types like arrays and objects, javascript always does an assignment by reference. That means when you do:

var a=document.getElementById('somediv').style.display;

since the value in the display property is a string, javascript will use assignment by value and the value of the string in the display property is copied to the a variable. Once this copy has been made, the a variable has no connection whatsoever with the display property. You can change the display property and a completely independently as they each have their own copy of the string.

So, when you then do:

a="block";

you are just assigning a new string to the a variable as it has nothing to do with the previous display property.

---

On the other hand, when you did this:

var a=document.getElementById('somediv');

you were assigning an object to a. And, javascript always assigns objects by reference. That means that a has a pointer to the somediv object. There is no copy, they both point to the exact same object. So, any change you make to either reference will actually be changing the same object. So, when you do:

 a.style.display="block";

you are changing the actual DOM object.

---

The rule I remember is that simple types like numbers, strings and booleans are copied when assigned (assignment by value). Complex types like arrays and objects are not copied and only a pointer to the original object is put in the new variable (assigned by reference) so both point to the exact same object.

Assignment by value is pretty simple. Assignment by reference can be both powerful and occasionally confusing enough to cause bugs in software that doesn’t anticipate the consequences of a true reference to the original. Because of this, if you ever want an actual copy of an object, you have to explicitly make a copy of the object because an assignment does not do that for you. On the other hand, it can be very useful to have references to complex objects that you can pass around as long as you understand how it works. There is, in javascript, no way to get a reference to a simple type like a number, string or boolean. It can be put into an object (as a property) and you can then pass a reference to the object, but you can’t pass a reference to the simple type.

---

Here are a few examples:

// define person
var person = {height: 66, hair: "blonde"};

// assign the person object to bob
// because person is an object, the assignment is by reference
var bob = person;

// change bob's hair
bob.hair = "red";

// because assignment was by reference, person and bob are the same
// object so changing one changes the one original
alert(person.hair);    // red

---

// define person
var person = {height: 66, hair: "blonde"};

// assign the person's height to a variable
// because height is a number, the assignment is by value (e.g. it's copied)
var myHeight = person.height;

// change both heights
myHeight = 72;
person.height = 60;

// because assignment was by value, myHeight and person.height are 
// completely separate copies so changing one does not affect the other
alert(myHeight);         // 72
alert(person.height);    // 60