Primitive values vs Reference values - Javascript

In JavaScript, variables can hold two types of values: primitive values and reference values.

Primitive values are simple data types that contain a single value. In JavaScript, there are five primitive data types:

Boolean: a true or false value
Null: a special value that represents an empty or null value
Undefined: a special value that represents a value that has not been set or is not available
Number: a numeric value
String: a sequence of characters

Reference values, on the other hand, are objects that contain a reference to the memory location of the value they represent. This means that when you assign a reference value to a variable, you are not creating a new copy of the value, but rather creating a new reference to the original value.

For example:

let x = 10;
let y = x;

console.log(x); // Output: 10
console.log(y); // Output: 10

x = 20;

console.log(x); // Output: 20
console.log(y); // Output: 10

In this example, x and y are both primitive values of type Number, and the assignment y = x creates a new copy of the value of x and assigns it to y. Therefore, when we change the value of x to 20, it does not affect the value of y.

If we were to use reference values instead:

let x = { value: 10 };
let y = x;

console.log(x); // Output: { value: 10 }
console.log(y); // Output: { value: 10 }

x.value = 20;

console.log(x); // Output: { value: 20 }
console.log(y); // Output: { value: 20 }

In this example, x and y are both reference values that point to the same object. The assignment y = x does not create a new copy of the object, but rather creates a new reference to the original object. Therefore, when we change the value of the value property of the object, it is reflected in both x and y.

Here is an example of a more advanced use of reference values in JavaScript:

function updateObject(obj) {
  obj.value = 20;
}

let obj1 = { value: 10 };
let obj2 = { value: 10 };

updateObject(obj1);
console.log(obj1.value); // 20
console.log(obj2.value); // 10

// In this example, we have a function that takes an object as an argument and
// updates its value property to 20. We then create two objects, obj1 and obj2,
// with a value property set to 10. When we pass obj1 to the updateObject function,
// the value of obj1.value is updated to 20. The value of obj2.value remains unchanged,
// because it is a separate object and was not passed to the function.

let arr1 = [1, 2, 3];
let arr2 = [1, 2, 3];

function updateArray(arr) {
  arr[0] = 10;
}

updateArray(arr1);
console.log(arr1); // [10, 2, 3]
console.log(arr2); // [1, 2, 3]

// In this example, we have a function that takes an array as an argument and
// updates the first element to 10. We then create two arrays, arr1 and arr2,
// with the same values. When we pass arr1 to the updateArray function,
// the first element of arr1 is updated to 10. The first element of arr2 remains unchanged,
// because it is a separate array and was not passed to the function.

This example might be little bit hard for beginners. But, still give it a try:

const originalObject = {
  value: 10,
  nested: {
    value: 20,
    deeperNested: {
      value: 30
    }
  }
};

let copiedObject = Object.assign({}, originalObject);

console.log(copiedObject.value); // 10
console.log(copiedObject.nested.value); // 20
console.log(copiedObject.nested.deeperNested.value); // 30

originalObject.value = 100;
originalObject.nested.value = 200;
originalObject.nested.deeperNested.value = 300;

console.log(copiedObject.value); // 10
console.log(copiedObject.nested.value); // 20
console.log(copiedObject.nested.deeperNested.value); // 30

// In this example, we have an originalObject with a nested structure and three values.
// We use the Object.assign() method to create a copy of the originalObject and assign it to copiedObject.
// We then log the values of the properties in copiedObject to the console.
// Next, we update the values of the properties in the originalObject.
// Finally, we log the values of the properties in copiedObject again, to see if they were affected by the changes to the originalObject.
// As we can see, the values in copiedObject remain unchanged, because it is a separate object with its own copy of the values.

Conclusion

It's important to understand the difference between primitive values and reference values in JavaScript, as it can have significant implications when working with variables and objects.