Primitive Values and Object References in JavaScript

In the Wrapper Objects in JavaScript blog, we have learned about what wrapper objects are. Wrapper objects are temporary objects created when we access a property of astring, number, or boolean are known as wrapper objects. In this blog, we will learn about the Primitive Values and Object References in JavaScript.

What are Primitive Values?

In JavaScript, we have two main types of things: primitive values (like undefined, null, booleans, numbers, and strings) and objects (which include arrays and functions). Primitives are immutable, meaning we can't modify or change their values. This makes sense for numbers and booleans because it wouldn't make sense to change their values. But it is not obvious for strings. Strings are similar to arrays of characters, we may think we can change a character at any given position. However, in reality, JavaScript doesn't permit this. All string methods that seem to change a string actually create and return a new string value. Let's take a look at the example

//Working with number
var numValue = 20;
numValue = 99;
// It will not modify the value; instead, it will create a new value

//Working with string
var strValue = "JavaScript";
strValue[2] = 'w';
// It will not change the actual string

//Creating a new string using string method
var newStrValue = strValue.replace('w','v');
// The Output for strValue will be "JavaScript" and the value for newStrValue will be "JawaScript"

In the above example, we demonstrate that we can't directly change the value of a number or a character in a string. Instead, when we want to make modifications, we can use methods like replace for strings, which create and return new values without altering the original.

Primitives are compared by their actual value. For numbers,booleans, null, and undefined, it's straightforward because they only make sense to be compared this way. Strings, on the other hand, are a bit tricky. When comparing two different strings, JavaScript considers them equal only if they have the same length and each character at corresponding positions is the same. Let’s take a look at the example:

// Comparing numbers
var numValue1 = 99;
var numValue2 = 99;
console.log(numValue1 === numValue2); // Outputs: true

// Comparing strings
var strValue1 = "Welcome";
var strValue2 = "Welcome";
console.log(strValue1 === strValue2); // Outputs: true

// Comparing strings with different characters
var strValue3 = "JavaScript";
console.log(strValue1 === strValue3); // Outputs: false

In the above example numValue1 and numValue2 are two numbers which are compared using strict equality operators. As both the numbers are same so it returns true. strValue1 and strValue2 are the strings which are compared using the same equality operator. As the length and index of each character is the same, so it returns true. In the last piece of code strValue1 is compared with strValue3 which has a different string, so it returns false.

What are Object References?

Objects are not the same as primitives. Unlike primitives, objects can be changed, which means their values can be modified. Let’s take a look at the example

// Creating an object
var employee = { name: "Smith", age: 29 };
// Modifying the object
employee.age = 27;
console.log(employee); // Outputs: { name: "Smith", age: 27 }

In the above example, we have created an object employee with properties name and age. Later, we modify the age property, showcasing the mutability of objects.

Objects are referred to as reference types, setting them apart from JavaScript's primitive types. In simple terms, when we talk about objects, their values are references. Comparing objects involves checking if they refer to the exact same underlying object. Let’s take a look at the example

// Creating two objects
var employee1 = { name: "John" };
var employee2 = { name: "John" };

// Comparing objects by reference
console.log(employee1 === employee2); // Outputs: false

// Creating another object referring to the same underlying object
var employee3 = employee1;

// Now comparing the original object with the new reference
console.log(employee1 === employee3); // Outputs: true

In this example, we've got two different objects, employee1 andemployee2, but they have the same property values. When we use ===to compare them, it gives us false because they're separate objects. However, if we make a new reference, employee3, pointing to the same original object as employee1, then comparing employee1 === employee3will be true.

In summary, we grasped the immutability of Primitive Values. Object References showcased the mutability of objects, offering a key distinction from primitive values in JavaScript.