Understanding Reference vs. Value in JavaScript

Understanding Reference vs. Value in JavaScript

JavaScript is a versatile and powerful programming language used for both front-end and back-end web development. One fundamental concept that every JavaScript developer should grasp is the difference between reference and value when working with variables. In this article, we will explore this distinction, its implications, and provide plenty of code examples to make it crystal clear.

What's the Difference?

In JavaScript, variables can hold either primitive data types (such as numbers, strings, booleans, etc.) or reference data types (like objects and arrays). The key difference between reference and value lies in how they are stored and manipulated in memory.

Value Types (Primitive Types)

Value types store the actual value in the variable. When you assign a value type variable to another variable or pass it as an argument to a function, a copy of the value is created. This means that changes to the new variable won't affect the original variable.
Here are some examples of value types:

Numbers

let a = 5;
let b = a;
b = 10;console.log(a); // Output: 5
console.log(b); // Output: 10

Strings

let str1 = "Hello";
let str2 = str1;
str2 = "World";console.log(str1); // Output: "Hello"
console.log(str2); // Output: "World"

Booleans

let isTrue = true;
let isFalse = isTrue;
isFalse = false;
console.log(isTrue);  // Output: true
console.log(isFalse); // Output: false

Reference Types

Reference types store a reference to the actual object in the variable. When you assign a reference type variable to another variable or pass it as an argument to a function, you're passing a reference to the same object in memory. This means changes to one variable will affect the other.
Here are some examples of reference types:

Arrays

let arr1 = [1, 2, 3];
let arr2 = arr1;
arr2.push(4);
console.log(arr1); // Output: [1, 2, 3, 4]
console.log(arr2); // Output: [1, 2, 3, 4]

Objects

let person1 = { name: "Shameel", age: 29};
let person2 = person1;
person2.name = "Sam";
console.log(person1); // Output: { name: "Shameel", age: 29}
console.log(person2); // Output: { name: "Sam", age: 29}

Pass by Value vs. Pass by Reference

Understanding the difference between reference and value types is crucial because it impacts how data is shared and modified in your JavaScript code. JavaScript is often described as a "pass-by-value" language for primitive types and a "pass-by-reference" language for reference types.

Pass by Value (Primitive Types)

When you pass a primitive type as an argument to a function, you're passing a copy of the value. Any changes made to the parameter inside the function do not affect the original value outside the function.

function modifyNumber(num) {
  num = 42;
}let originalNum = 10;
modifyNumber(originalNum);
console.log(originalNum); // Output: 10

In this example, the modifyNumber function doesn't affect the originalNum variable because it's a copy of the value.

Pass by Reference (Reference Types)

When you pass a reference type as an argument to a function, you're passing a reference to the original object. Any changes made to the object inside the function will also affect the original object outside the function.

function modifyArray(arr) {
  arr.push(42);
}let myArray = [1, 2, 3];
modifyArray(myArray);
console.log(myArray); // Output: [1, 2, 3, 42]

In this example, the modifyArray function modifies the original array because it receives a reference to it.

Copying Values vs. Cloning Objects

Copying values and cloning objects are two common operations in JavaScript, and understanding reference vs. value is essential here:j

// Copying a value
let originalNum = 10;
let copyNum = originalNum;// Cloning an object
let originalObject = { key: "value" };
let cloneObject = { ...originalObject };

Copying a primitive type creates a new variable with the same value, while cloning an object creates a new object with the same properties and values.

Conclusion

In JavaScript, understanding the distinction between reference and value is crucial for effective programming. It affects how data is shared, modified, and manipulated in your code. Remember:
Value types store the actual value, and changes to one variable won't affect others.
Reference types store a reference to the object, and changes to one variable will affect others referencing the same object.

Mastering this concept will help you write more predictable and bug-free JavaScript code in your projects.
Happy coding!

Comments

[Shili Mrawen]

The example you've provided has a mistake in the expected output. In JavaScript, when you assign an object to another variable, both variables reference the same object in memory. So, modifying the object through one variable will reflect in the other.
`let person1 = { name: "Shameel", age: 29 };
let person2 = person1;
person2.name = "Sam";

console.log(person1); // Output: { name: "Sam", age: 29 }
console.log(person2); // Output: { name: "Sam", age: 29 }`

[AmirSalar]

great article but the example of objects has a little bug though ;)
let person1 = { name: "Shameel", age: 29};
let person2 = person1;
person2.name = "Sam";
console.log(person1); // Output: { name: "Shameel", age: 29}
console.log(person2); // Output: { name: "Sam", age: 29}

but both names will be Sam on the console :))

[Syed Sirajul Islam Anik]

When cloning the objects, the non-primitive types will still hold the reference. So changing any of the object reference's value will also cause the change to other objects too.

Example:

const obj = {
  name: 'a',
  list: [1,2,3,4,5],
};

const obj2 = {...obj};
obj2.list.push(1000);

console.log(obj);
console.log(obj2);

The above code will print out like this.

{ name: 'a', list: [ 1, 2, 3, 4, 5, 1000 ] }
{ name: 'a', list: [ 1, 2, 3, 4, 5, 1000 ] }