Pass by Reference in JavaScript – Everything you need to know

In the world of programming, understanding how variables and objects operate is crucial. Within JavaScript, this understanding becomes even more critical as it's a language that can sometimes defy our expectations. Today, we'll delve into one such aspect: pass by reference in JavaScript. Whether you're a beginner looking to deepen your knowledge, or an intermediate developer aiming to solidify your understanding, this post is for you. We'll explore the concept, see it in action, and address some frequently asked questions.

What does "Pass by Reference" mean?

In programming, when we pass an argument to a function, it can be done in two ways: Pass by Value or Pass by Reference. "Pass by Value" means that a copy of the actual value is passed to the function. Any changes made to this value in the function do not affect the original variable. On the other hand, "Pass by Reference" means that a reference to the original variable is passed to the function. Any changes made to this reference will also affect the original variable.

JavaScript, interestingly, does not have typical pass by reference like other languages such as C++ or Java. Instead, it has a unique way of handling its data types.

Primitive types and Reference types in JavaScript

JavaScript classifies its data types into two broad categories: Primitive types and Reference types.

Primitive types in JavaScript include Undefined, Null, Boolean, Number, String, and Symbol. When you assign a variable with a primitive data type to another variable, JavaScript stores the value directly and any changes to one variable do not affect the other.

Reference types, on the other hand, include Object, Array, and Function. When you assign a variable with a reference data type to another variable, JavaScript stores not the value itself, but a reference to that value. Any changes made through this reference will affect the original value because they both refer to the same place in memory.

Let's see this in action:

let primitive = 10;
let anotherPrimitive = primitive;

primitive = 20;

console.log(primitive); // 20
console.log(anotherPrimitive); // 10

In the above example, changing the value of primitive does not affect anotherPrimitive. They are independent of each other. However, the story changes with reference types:

let obj = { value: 10 };
let anotherObj = obj;

obj.value = 20;

console.log(obj.value); // 20
console.log(anotherObj.value); // 20

As we can see, changing a property in obj has also affected anotherObj. This is because they both refer to the same object in memory.

How does JavaScript handle function parameters?

When we pass primitive types to a function, they are passed by value. That means a copy of the value is created and used within the function. Any changes made to these values within the function do not affect their original counterparts.

function updateValue(val) {
  val = 20;
}

let value = 10;
updateValue(value);

console.log(value); // 10

However, when we pass reference types to a function, the reference to the object is passed. Any changes made to the object within the function will be reflected in the original object.

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

let obj = { value: 10 };
updateObj(obj);

console.log(obj.value); // 20

FAQ

Q: Does JavaScript pass by reference?

A: JavaScript does not have traditional pass by reference like other languages. However, when dealing with objects (reference types), a reference to the object is passed to the function, allowing changes to the object within the function to affect the original object.

Q: How are primitive types passed in JavaScript?

A: Primitive types in JavaScript are passed by value. This means a copy of the value is created and used within the function. Changes to this value within the function do not affect the original variable.

Q: Can I prevent JavaScript from changing original reference types within a function?

A: Yes, you can create a copy of the object before passing it to the function. This can be done using methods like Object.assign() or the spread operator (...).

For more information, you can refer to the official JavaScript documentation.

In conclusion, understanding how JavaScript handles data types is crucial for writing efficient and bug-free code. While it may not have traditional pass by reference, its unique way of dealing with reference types can be leveraged to our advantage once understood. Keep experimenting, keep learning, and happy coding!