JavaScript - Reference Type

JavaScript Reference Type

There are two types of data types in JavaScript: primitive and reference type.

Primitive data types are immutable, which means that they cannot be changed. The primitive data types in JavaScript are: Number, String, Boolean, Undefined, Null, Symbol.

Reference data types are mutable, which means that they can be changed. The reference data types in JavaScript are: Object, Array, Function.

When you assign a primitive data type to a variable, the variable gets a copy of the value. When you assign a reference data type to a variable, the variable gets a reference to the value. This means that if you change the value of a reference data type, the change will be reflected in all of the variables that reference that value.

For example, the following code creates two variables, x and y, and assigns them the value 10:

JAVASCRIPT CODE

let x = 10;
let y = 10;

The variables x and y both have a copy of the value 10. If you change the value of x, the value of y will not change.

JAVASCRIPT CODE

x = 20;
console.log(x); // 20
console.log(y); // 10

The following code creates two variables, x and y, and assigns them an array:

JAVASCRIPT CODE

const x = [1, 2, 3];
const y = x;

The variables x and y both reference the same array. If you change the value of the array that x references, the change will be reflected in the array that y references.

JAVASCRIPT CODE

x[0] = 4;
console.log(x); // [4, 2, 3]
console.log(y); // [4, 2, 3]

It is important to understand the difference between primitive and reference data types in JavaScript so that you can write code that is efficient and predictable.

Objects and functions are the two main reference types in JavaScript and are explained as follows.

Object

Objects are unordered collections of key-value pairs, where keys are strings or symbols, and values can be any data type, including other objects.

JAVASCRIPT CODE

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 30
};

Function

Functions are also reference types in JavaScript. Functions are special types of objects that can be invoked (called) to perform a task.

JAVASCRIPT CODE

function greet(name) {
  alert("Hello, " + name + "!");
}

Examples

Example 1: Object Mutability

In this example, we demonstrate object mutability for which first an object is created and then modifications are made through that reference which in turn affect the original object. The person object is modified via the reference from the anotherPerson precisely the age which is changed from 25 to 30. As seen in the output, the original object changes after the modification hence the object is said to be mutated.