5.7 Values Types VS References Types

In JavaScript, we have two categories of types. On the one hand, we have value types, also called primitives, on the other hand, we have reference types. So, in the category of value types, we have number, Strings, so String Booleans, symbol, which is new in ES6, as well as Undefined and null. These are the primitive types or value types. On the other side, we have objects, functions and arrays. So in the last video, you learned that functions are also objects. The same goes for arrays, so in summary in JavaScript, we have primitives and objects. Now, in this video, I'm going to show you how primitives and objects behave differently, because it's absolutely important for you to understand, before I move on to the next section where I talk about prototypes. So on this empty canvas, I'm going to define two primitives, x and y. I'm going to set y to x, so here y is equal to 10, now I'm going to change the value of x to 20, what I want you to note here is that x and y are two independent variables, so, let's save the changes Let's go back to the console, let's save x, x is equal to 20 and y is equal to 10, they're independent. So, when we work with primitives. This value that we have here is stored inside this variable. When we copy this variable, this value that is stored in the variable is copied into this new variable. So they are completely independent of each other. Now let's see what happens if we use a reference type or an object here. So I'm going to change this to an object that has a property called value. And then instead of saying x is equal to 20, I'll put x. value equal to 20. So save the changes, back in the console, let's save x so you can see that the value property is equal to 20, now let's save y, you can see that the value property of y is also equal to 20. When we use an object, that object is not stored in this variable. That object is stored elsewhere in memory and the address of that memory location is stored inside this memory variable. So when we copy x into y, it is the address or reference that is copied. In other words, both x and y point to the same object in memory. And when we change each object using x or y, our changes are immediately visible to the other variables. So here is the conclusion. Primitives are copied by value, reference types or objects are copied by their reference. Let's take a look at another example. So I'm going to define a function called increase that takes a number, and here we're simply increasing that number by one. Let's declare a variable that we call number and set it to 10. And then call this function and pass in that number. Now, if I connect this number to the console, what do you think you'll see? Let's see. So save the changes, we see 10. Now we have increased number here, well, when we call increase and pass this variable number, its value is copied into this local parameter in this function. So this variable is completely independent of this other variable number. Here, in this function, we're incrementing this number by 1, so it will be 11, but after this function, this number will go out of frame. So when we record this number on the console, we're essentially dealing with this first number. So I told you that the primitives are copied by their value. So these are two independent copies. That's why you see 10 on the console. Now let's change that to a reference type or an object. So I'm going to change 10 to an object, which has a value property. Let's rename this variable to an object, and in the same way, I'll rename the parameter of this function to an object, and then increment the object point value. Now, when we record this on the console, what do you think we're going to see? We'll see 11. We got this object with the value 11. The reason for this is that when we call this function increase and pass this object. This object is passed by its reference. So this local parameter that we have here will point to the same object that we defined here. So in this case we are not dealing with two independent copies, we have two variables that point to the same object. So any changes we make to that object will be visible to the other variable. So remember that in JavaScript we have value types, also called primitives, as well as reference types which are objects. Primitives or value types are copied by their values, and objects are copied by their reference. That's it for this video on value types and references in JavaSscript, let's meet again for a very next video.