What is the difference between pass by value and pass by reference in JavaScript?

Pass by Value vs. Pass by Reference in JavaScript

When you're learning to code in JavaScript, you might come across the terms "pass by value" and "pass by reference." These sound a bit complicated, but they're actually all about how JavaScript handles data when you pass it into functions. Let's explore the differences between the two in a simple way.

Pass by Value

In JavaScript, some types of data are passed by value. This means that when you pass these values into a function, JavaScript makes a copy of the value. It’s like making a photocopy of a picture and giving it to someone. You keep the original, and they get the copy. Any changes they make to their copy won't affect your original.

This happens with primitive data types. In JavaScript, primitive types include things like:

Numbers (e.g., 5, 42)
Strings (e.g., 'Hello', 'World')
Booleans (true or false)
Null, Undefined, Symbols, and BigInt

For example:

let a = 10;
function changeValue(x) {
  x = 20;
}
changeValue(a);
console.log(a); // Output: 10

In this example, a is passed to the function changeValue. Inside the function, x is a copy of a, so changing x doesn’t change a itself. The original value of a remains 10.

Pass by Reference

Now, pass by reference is a bit different. This happens when you’re dealing with objects or arrays. Instead of making a copy, JavaScript gives a reference, which means that any change made affects the original. Think of it like giving someone a link to a shared document online—any changes they make will show up in the document for everyone to see.

For example:

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

Here, myArray is passed to the function changeArray. Since it’s an array, JavaScript passes a reference. This means that when arr.push(4) is called, it directly affects myArray. So when you log myArray, it now has the new value [1, 2, 3, 4].

Deep Cloning

Sometimes, you want to work with a copy of an object or array without affecting the original. In such cases, you need to create a deep clone. A deep clone makes an entirely new copy of an object or array, including any nested objects or arrays. This way, changes to the copy won’t affect the original.

You can create a deep clone in JavaScript using methods like JSON.parse(JSON.stringify(object)). For example:

let originalArray = [1, 2, { a: 3 }];
let clonedArray = JSON.parse(JSON.stringify(originalArray));

clonedArray[2].a = 42;
console.log(originalArray); // Output: [1, 2, { a: 3 }]
console.log(clonedArray);  // Output: [1, 2, { a: 42 }]

In this example, clonedArray is a deep clone of originalArray. Changing clonedArray does not affect originalArray, which keeps its original structure and values.

Key Difference

Pass by value makes a copy of the value, so changes don’t affect the original.
Pass by reference passes a link to the original object or array, so changes do affect the original.
Deep clone creates a new copy of an object or array, ensuring that changes to the new copy do not affect the original.

Why Is This Important?

Understanding the difference helps you write better, bug-free code. If you want to make sure that a value doesn’t change, use primitives, which are passed by value. But if you need to share and modify data across different parts of your code, using objects or arrays can be really useful.

For more advanced reading, it's also helpful to know about deep cloning. Sometimes, you may need to create a complete, independent copy of an object or array (not just a reference). In these cases, you can use techniques like JSON.parse(JSON.stringify(object)) or use libraries like Lodash, which offer deep cloning functions. This way, changes to the new object won't affect the original.

Knowing about deep cloning will also help you avoid unexpected surprises when you want to keep your original data unchanged. It’s one of those little things that makes you a more careful and effective programmer.

ir3ne / javascript-questions-and-answers