Reference and Primitive Types Refresher

Back to: ReactJS Tutorials

Reference and Primitive Types Refresher in JavaScript:

In this article, I am going to discuss Reference and Primitive Types Refresher in JavaScript with Examples. Please read our previous article where we discussed Destructuring in JavaScript.

Reference and Primitive Types Refresher:

In our previous articles, we introduced you to some of the most important next-generation JavaScript features. There are two other things that we want to cover. They are not next-generation JavaScript but they are features you might have missed or forgotten, and they’re very important to keep in mind.

The first feature or concept of JavaScript that we are talking about is the fact that you have reference and primitive types. If we are creating a number like,

const number = 1;

Then this is a primitive type. That means if we create a second number num2 and set it equal to this number,

const num2 = number;

Then it will actually create a real copy of the number. If we log num2 on the screen,

console.log(num2);

it will print one. But it has copied that value 1 into num2. Now numbers, strings, and booleans are so-called primitive types. Whenever you reassign or you store a variable in another variable, it will copy the value. Objects and arrays are reference types. Though let us show you what we mean.

const person = {
  name: 'John'
};

const secondPerson = person;
console.log(secondPerson);

If we create a person object and then create a secondPerson object and assigned a person as a value here. Then if we console.log(secondPerson), it will print the same value as the first person but it will not actually have copied the person instead the person is stored in memory, and in the constant person, we store a pointer to that place in memory. And then we assigned person to secondPerson, so that pointer will be copied. In this case, if we changed person.name after having it copied,

cons person = {
  name: 'John'
};

const secondPerson = person;
person.name = "Dhruv";
console.log(seconPerson);

In this case, you are still expecting that secondPerson will print “John” because we copied the person, stored it in secondPerson, and thereafter changed the name. However, if we run the code, you will see, the name: “Dhruv”. Even though we are printing the secondPerson. So, for secondPerson the name also changed. The reason for this is that it just copied the pointer and points to the exact same object in memory as the person does.

So, if we change the name in person, we automatically change it to secondPerson. Now that is important and keep in mind that it is the same for arrays.

If you copy in an array and you then change an array element, it will also change in the copied array. This will become important in React because it can lead to unexpected behaviors. If you copy objects or arrays like this because you then may manipulate one object in one place in the app and accidentally manipulate another usage of the same object in another place of the app. Therefore, we will learn techniques to copy this in an immutable way which means we copy that by really copying the object and not just a pointer for that we can use the spread operator. Now we can simply create a new person object here and spread the person properties.

const person = {
  name: 'John'
};

const secondPerson = {
  ...person
};
person.name = "Dhruv"
console.log(secondPerson)

Output:

This will pull out the properties and the values of the properties from the object and add them to the newly created object i.e. secondPerson.

Now it prints an object with the name “John” even though we changed the name to “Dhruv” here because now we really created a real copy. We will again come back to this technique later in our upcoming articles. It is just important to realize and keep in mind that objects and arrays are reference types. If you reassign them, you are copying the pointer, not the value.

Therefore, if you want to do this in a real copy way, you will have to create a new object and just copy the properties and not the entire object. That is something very important to keep in mind.

Here, in this article, I try to explain Reference and Primitive Types Refresherin JavaScript with Examples. I hope you enjoy this Reference and Primitive Types Refresher in JavaScript article.