JavaScript: Pass by Reference or Value?

Understanding how JavaScript handles variable passing is crucial for effective programming. This article explores the concepts of pass-by-value and pass-by-reference in JavaScript, providing clear examples and explanations.

Table of Contents

1. Introduction
2. Data Types in JavaScript
3. Pass-by-Value
4. Pass-by-Reference
5. Common Misconceptions
6. FAQs
7. Conclusion

Introduction

JavaScript uses a combination of pass-by-value and pass-by-reference semantics, depending on the type of data being passed. This can be confusing for newcomers, so let’s break it down.

Data Types in JavaScript

JavaScript has two categories of data types:
1. Primitive Types: These include numbers, strings, booleans, null, undefined, symbols, and bigints. They are passed by value.
2. Reference Types: These include objects, arrays, and functions. They are passed by reference.

Pass-by-Value

When you pass a primitive type to a function, JavaScript creates a copy of the value. Changes inside the function do not affect the original variable.

Example: Passing a Number

function changeNumber(num) {
    num = 20;
    console.log("Inside function: " + num); // Output: 20
}

let x = 10;
changeNumber(x);
console.log("Outside function: " + x); // Output: 10

Here, x remains 10 because the function modifies a copy of the value.

Pass-by-Reference

When you pass a reference type to a function, you’re passing the memory address (reference) of the object. Changes inside the function affect the original object.

Example: Passing an Object

function changeObject(obj) {
    obj.name = "New Name";
    console.log("Inside function: " + obj.name); // Output: New Name
}

let person = { name: "Original Name" };
changeObject(person);
console.log("Outside function: " + person.name); // Output: New Name

Here, person.name changes because both variables reference the same object.

Common Misconceptions

• Reassignment Inside Functions: If you reassign a reference type inside a function, it doesn’t affect the original variable outside the function.
  “`javascript
  function reassignArray(arr) {
  arr = [1, 2, 3];
  console.log(“Inside function: ” + arr); // Output: 1,2,3
  }

let myArray = [4, 5, 6];
reassignArray(myArray);
console.log(“Outside function: ” + myArray); // Output: 4,5,6
``
In this case,myArray` remains unchanged because the function reassigns the parameter to a new array.

FAQs

1. What is pass-by-value?

Pass-by-value means that a copy of the value is passed to the function. Changes to the copy do not affect the original value.

2. What is pass-by-reference?

Pass-by-reference means that the function receives a reference to the original value. Changes to the referenced value affect the original.

3. How can I ensure an object is not modified in a function?

You can create a copy of the object before passing it. For shallow copies, use Object.assign() or the spread operator.
javascript
function modifyObject(obj) {
const copy = { ...obj };
copy.name = "Modified";
return copy;
}

4. Does pass-by-reference apply to all reference types?

Yes, arrays and functions are also passed by reference.

5. Why can’t I change a primitive type passed to a function?

Because the function works with a copy of the value, not the original.

Conclusion

JavaScript uses pass-by-value for primitives and pass-by-reference for objects. Understanding this distinction is key to writing efficient and bug-free code. Always consider what is being passed and how it will be modified.