Values and References

Understanding how data gets passed around JavaScript is an extremely important and necessary concept its developers to know.

Having a good foundation on variables and data types opens the path for exploring what is meant by passing data by value vs passing data by reference. Both these concepts will not only make you more aware of JavaScript, but will also keep you from making unexpected errors in your code.

And this is what this chapter is all about.

So shall we begin?

Consider the following code:

var text = "Hello";
var str = text;
text = "Bye";

console.log(str);

Go over it carefully and think what would be logged in the console.

First we assign a value to the variable text (in line 1) and then assign text to str (in line 2). Once this is done, we finally alter text.

Now at this moment one would expect that since text was assigned to str, changing text would cause str to change as well; but this doesn't happen.

Why?

This is because primitive data in JavaScript, including numbers, strings, Booleans etc, is passed by value.

Applying this to the example above:

In simple terms, both variables text and str have their own separate "Hello" values - where changing one won't change the other.

What's happening above, can be illustrated somehow by the code below:

var str = "Hello"; // own value
var text = "Hello"; // own value
text = "Bye";

console.log(str);

As is pretty clear and concise over here, both variables text and str have their own, separate values "Hello".

Now primitives aren't the only classification of JavaScript data types right? We have objects too. When objects are passed on to variables, they are passed by reference.

Consider the following code:

var obj = obj2 = {x: 10, y: 10};
obj2.x = 20;
console.log(obj.x); // 20

We set obj equal to obj2 which is equal to {x: 10, y: 10} and then alter obj2. Now despite the fact that we didn't explicitly alter obj we see that its property x is 20 and is therefore also changed. How? Owing to the passing by reference behavior:

Both the variables obj and obj2 refer to the same object. They DON'T hold separate {x: 10, y: 10} objects stored under their respective names, but instead a reference to one. Altering the reference object would have effect on all references.

And to alter the reference object, in this case, we can alter any of two variables obj or obj2. Changing one of them would change the reference object and thus change all the subsequent references.

Compared to this stance and the example discussed above in passing by value, if we had the following changing obj wouldn't have any effect on obj2:

var obj = {x: 10, y: 10}; // new object reference
var obj2 = {x: 10, y: 10}; // new object reference
obj2.x = 20;
console.log(obj.x); // 10

This is because now obj and obj2 hold references to two different objects - it just turns out that they are the same in this case. And this is important for you to remember - whenever we have a new object creation we have a new reference, regardless of whether the objects are same or not.

Now the next time you pass any object to a function's argument remember not to alter that argument variable if you don't want to alter the actual passed object. You can obviously read stuff without any issue but writing to that object would mean writing to the be indirectly  changing the original object.

Now a fairly good question arises in many devlopers' minds, and maybe it even did in yours - can we pass objects to functions or other variables in JavaScript by value?

Well the answer is a big YES!.

Though there isn't a native way to pass objects by value in JS, we can utilise a method Object.create() to emulate the same behavior. The idea lies in the concept of object prototypes which is just another world to discover as of yet. Therefore we will introduce this idea of how to pass objects by value in JavaScript there.

For now it's a "Bye" from data passing!