As a JavaScript developer, it is crucial to grasp the concepts of pass by value and pass by reference. These two approaches determine how data is handled when passing variables to functions or assigning them to other variables. In this blog, we'll explore the differences between pass by value and pass by reference, along with examples to solidify our understanding.

Pass by Value

In JavaScript, primitive data types such as numbers, strings, booleans, null, and undefined are passed by value. When you pass a variable of a primitive type to a function or assign it to another variable, a copy of the value is created. Any modifications made to the copy will not affect the original value.

Let's take a closer look at an example:

function incrementValue(num) {
  num++;
  console.log('Inside function:', num);
}

let count = 5;
incrementValue(count);
console.log('Outside function:', count);

Output:

Inside function: 6
Outside function: 5

In the example above, the count variable is passed as an argument to the incrementValue function. Inside the function, a new variable num is created, initially holding the same value as count. However, when we increment num by 1, it only affects the local copy, leaving the original count unchanged.

Pass by Reference

When it comes to objects (including arrays and functions), JavaScript follows the pass by reference approach. Instead of creating a copy of the entire object, a reference to the object's location in memory is passed. Consequently, any modifications made to the object within the function will affect the original object.

Let's see an example:

function addToList(item, list) {
  list.push(item);
  console.log('Inside function:', list);
}

let shoppingList = ['apples', 'bananas'];
addToList('oranges', shoppingList);
console.log('Outside function:', shoppingList);

Output:

Inside function: ['apples', 'bananas', 'oranges']
Outside function: ['apples', 'bananas', 'oranges']

In the above code, the shoppingList array is passed to the addToList function. Within the function, we use the push method to add the item to the list array. As arrays are passed by reference, the modification is reflected in both the local copy and the original shoppingList array.

Tricky Scenarios

Reassigning a parameter:

function updateValue(val) {
  val = 10;
  console.log('Inside function:', val);
}

let num = 5;
updateValue(num);
console.log('Outside function:', num);

Output:

Inside function: 10
Outside function: 5

In this case, even though val is reassigned inside the function, it does not affect the original num variable. Reassignment creates a new local variable, breaking the reference to the outer variable.

Modifying a property of an object:

function changeName(person) {
  person.name = 'John Doe';
  console.log('Inside function:', person);
}

let user = { name: 'Jane Smith' };
changeName(user);
console.log('Outside function:', user);

Output:

Inside function: { name: 'John Doe' }
Outside function: { name: 'John Doe' }

In this example, the changeName function modifies the name property of the person object. As objects are passed by reference, both the local copy and the original user object reflect the changes.

Conclusion

Understanding pass by value and pass by reference is crucial for writing effective JavaScript code. Remember that primitive types are passed by value, creating a copy, while objects are passed by reference, maintaining a reference to the original object. Being aware of these behaviors will help you avoid unexpected bugs and write cleaner, more predictable code in your JavaScript projects.

References

Have a look at the below questions to improve the concepts and several edge cases.

• Practice Questions