Understanding Pass by Value and Pass by Reference in JavaScript

Published on June 9, 2025 • 4 min read

Understanding pass by value and pass by reference is crucial for mastering JavaScript, especially for beginners. These concepts influence how variables store data and how changes to variables affect each other in your code. In this post, we'll break down these fundamentals in a clear, approachable way, helping you avoid common confusions that often trip up new JavaScript developers. Whether you're handling numbers or working with objects, grasping how JavaScript handles memory and variable assignments will improve your coding skills significantly.

What is Pass by Value in JavaScript?

Pass by value means when you assign the value of one variable to another, the exact value is copied. Both variables become independent after this assignment.

For example:

let a = 100;  // a holds the value 100
let b = a;    // b gets a copy of the value inside a
console.log(a); // 100
console.log(b); // 100

b = 200;      // Changing b does NOT affect a
console.log(a); // 100
console.log(b); // 200

Here, a and b have separate copies of the value. Changing b does not affect a, which is key to understanding how primitive values like numbers and booleans behave. Think of it like photocopying a document — changes to the copy don’t affect the original.

Primitives such as numbers, strings, booleans, null, undefined, and symbols are passed by value in JavaScript.

For a deeper dive on JavaScript data types, you can check MDN’s documentation on Data types and data structures.

Exploring Pass by Reference with Objects

Pass by reference only occurs with objects in JavaScript — including arrays and functions, since they’re treated as objects. Instead of copying the object itself, JavaScript copies the reference (or memory address) that points to the object.

Consider this example:

let c1 = { name: "BMW", cost: 75.6, mileage: 8.9 };
let c2 = c1;  // c2 references the same object

console.log(c1.name); // BMW
console.log(c2.name); // BMW

c2.name = "Kia";    // Modify the object via c2
console.log(c1.name); // Kia — c1 reflects the change
console.log(c2.name); // Kia

Both c1 and c2 point to the same object in memory (think of it like two keys opening the same locker). If you modify the object from either variable, the change is visible through the other, since they share the same reference.

For more on JavaScript objects and references, see the detailed guide on Working with objects.

Visualizing Memory: Stack vs Heap

Understanding pass by value and reference is easier when visualizing how JavaScript manages memory.

• Stack: Stores primitive values and references to objects. Variables are allocated here.
• Heap: Stores actual objects and data structures.

In our object example, the variable stores the reference (an address pointing to the object on the heap). When you pass an object variable to another, you copy the reference from the stack, not the actual object on the heap.

This distinction explains why passing an object variable between two variables does not create two objects, just two references to the same object.

To explore JavaScript's execution context and memory management more, check out JavaScript memory management.

Key Differences: Pass by Value vs Pass by Reference

| Aspect | Pass by Value | Pass by Reference | |-------------------------|------------------------------------|---------------------------------------| | Data types | Primitives (numbers, booleans, etc)| Objects (including arrays, functions) | | Assignment result | Copies the actual value | Copies the reference (memory address) | | Independence after copy | Two independent copies | Both variables reference the same object | | Effect of modification | Change in one variable does not affect the other | Change in one reference affects all references |

Summary

Grasping the difference between pass by value and pass by reference is essential for debugging and writing efficient JavaScript code. Primitives copy values directly, creating independent variables, while objects share references, meaning modifications through one reference affect all.

With this knowledge, you can build clearer mental models for JavaScript behavior and avoid pitfalls, especially when manipulating objects or complex data structures. As you continue learning JavaScript, revisiting these concepts will deepen your understanding of memory management and performance.

Keep practicing these examples, and you'll soon work more confidently with variables and objects. If you're interested in exploring more about JavaScript’s core concepts, the MDN Web Docs is a great resource.

Happy coding!

This blog post is based on content from a YouTube video. Watch it here. All rights reserved by the original creator.