Pass By Reference VS Value: Weird Javascript

Buy Me a Coffee☕ ️It will help me to make my content more informative.

Javascript is one of the most popular programming languages. If you have work related to the web then there is no chance you can do anything related to browsers without Javascript. Whether you want to work on frontend or backend it gets you all covered. According to the latest Stack Overflow survey of Most Popular Technologies For Programming, scripting, and markup languages.

Why I am telling you all that?JavaScript is a widely used programming language, and it keeps getting more popular. There are many additional tools built on top of JavaScript, like frameworks and libraries. Because of this, it’s important to get a good grip on the basic concepts in JavaScript, especially the ones that are often asked about in job interviews.

One of those concepts is Pass By Reference && Pass By Value

Pass By Value

In Javascript primitive values such as numbers, strings, boolean, etc.. are passed by value which means if it is passed to a function a copy of the actual value is passed, leaving the original value unchanged.

function modifyValue(x) {
  x = x * 2;
}

let num = 5;
modifyValue(num);
console.log(num); // Output: 5

In the above code when we pass num to a function the Javascript copies the actual value of the variable and passes it to the function so the actual value was not changed because it was not multiplied by 2, a copy of it was. So we get the same value in the console, the original value num remained unchanged. This is because the function received a copy of the value, not the original variable.

Pass by Reference

In contrast to primitive data types, like numbers or strings, JavaScript treats objects and arrays differently. When you pass an object or an array to a function, JavaScript doesn’t create a duplicate of it. Instead, it passes over a reference to the memory location where the original variable is stored. So, if you make changes to the variable inside the function, it affects the actual value because both the function and the original variable point to the same memory location where the variable exists.

function modifyArray(arr) {
  arr.push(4);
}

const myArray = [1, 2, 3];
modifyArray(myArray);
console.log(myArray); // Output: [1, 2, 3, 4]

In the above example, we can see that we passed the array to function and added value 4 in the array. Outside of function when we console the array the actual array was changed.

Quick Test

Let’s see following code snippet.

const object={
  name: "Younus Raza"
}

function modifyObject(obj){
  obj["city"]="Karachi"
}

modifyObject(object)

console.log(object) --------> ## What will the output

When I was asked this in an interview I immediately answered “The object will remain the same”, thought it such an easy question, turns out I was wrong. At that time my understanding of JS was not that strong. The answer is it will change because it is passed as a reference, not a value.

Learning this concept was tough for me because JavaScript was my first programming language, and it passes values in a dynamic way, unlike other languages like C. So one of my seniors sent me this so I could visualize the concept more easily.

Conclusion

Understanding the difference between passing by value and passing by reference is crucial for writing reliable JavaScript code. Primitive data types are passed by value, leaving the original variable unchanged, while objects and arrays are passed by reference, enabling changes to impact the original data.

If you found this content helpful, please show your support by giving it a clap, following me on LinkedIn and YouTube, and consider making a small contribution on Buy Me a Coffee☕️. Your support is greatly appreciated!