JavaScript Pass By Value Function Parameters

What is Pass By Value?

In JavaScript, pass by value means that when a variable is passed to a function, a copy of its value is sent, rather than the actual reference to the value. This means that changes made to the parameter inside the function do not affect the original variable.

How Pass By Value Works

When a primitive data type (such as a number, string, or boolean) is passed to a function, a copy of that value is made and passed to the function’s parameter. The function operates on the copy, and the original variable remains unchanged outside the function.

Primitive Data Types in JavaScript

• Numbers
• Strings
• Booleans
• undefined
• null
• Symbols

These data types are passed by value in JavaScript.

Pass By Value Example

Let’s look at a simple example to understand how pass by value works with primitive types.

function changeValue(num) {
  num = 10;
  console.log("Inside function:", num); // 10
}
 
let myNum = 5;
console.log("Before function:", myNum); // 5
 
changeValue(myNum);
 
console.log("After function:", myNum); // 5

Explanation:

• The variable myNum is passed to the function changeValue.
• Inside the function, num is assigned the value 10, but this does not change myNum outside the function.
• Since JavaScript passes primitive types by value, myNum remains 5 after the function executes.

Why Does Pass By Value Work This Way?

JavaScript’s decision to pass primitive types by value helps in avoiding unintended side effects. When working with primitive values, each function call works on its own copy, ensuring that no external variables are accidentally modified.

This makes debugging and testing easier, as you can be sure that functions don’t alter the original data unless explicitly intended.

Pass By Value vs. Pass By Reference

It’s essential to understand the difference between pass by value and pass by reference, especially when working with non-primitive data types (like objects and arrays). While primitive values are passed by value, objects and arrays are passed by reference.

Objects and Arrays (Pass By Reference)

When you pass an object or array to a function, the reference (or memory address) of that object is passed, not the actual object itself. This means that if the object or array is modified inside the function, those changes will reflect in the original data.

Example: Pass By Reference

function modifyArray(arr) {
  arr.push(4);
  console.log("Inside function:", arr); // [1, 2, 3, 4]
}
 
let myArray = [1, 2, 3];
console.log("Before function:", myArray); // [1, 2, 3]
 
modifyArray(myArray);
 
console.log("After function:", myArray); // [1, 2, 3, 4]

Explanation:

• The myArray is passed to the modifyArray function by reference.
• Modifying the array inside the function also changes myArray outside the function, because both refer to the same array in memory.

Important Takeaways

• Primitives (numbers, strings, booleans, etc.) are passed by value: A copy of the value is passed, so changes to the parameter inside the function do not affect the original variable.
• Objects and arrays are passed by reference: The reference to the object/array is passed, meaning changes to the object or array inside the function affect the original variable.
• Pass by value ensures that primitive data types are isolated from changes outside of the function, offering a clean and predictable behavior.

Conclusion

JavaScript’s pass by value behavior for primitive data types helps maintain consistency and avoid unexpected side effects when working with functions. Understanding how pass by value works is crucial to writing reliable, bug-free code. However, remember that non-primitive types like objects and arrays behave differently, being passed by reference instead, which can lead to unintended modifications. By grasping both concepts, you can manage data flow effectively in your JavaScript applications.

Feel free to experiment with different data types and functions to better understand how JavaScript handles pass by value and pass by reference in real-world scenarios!