Value vs. Reference in JavaScript: Why It Matters?

Javascript Value vs Reference

If you’ve ever encountered mysterious bugs in your JavaScript code or stumbled during technical interviews, the culprit might be a misunderstood concept: value vs. reference. This fundamental feature of JavaScript is rarely discussed in depth, but it’s the root of countless headaches for developers. Let’s break it down so you can save time, avoid bugs, and level up your coding skills.

Primitives vs. Objects: The Two Types of Values

In JavaScript, all values fall into two categories

1. Primitives: Numbers, strings, Booleans, null, and undefined
2. Objects: Arrays, functions, dates, regular expressions, and plain objects

Why does this matter? How these values are stored and copied determines how they behave in your code.

Assignment and Comparison: The Core Difference

Let’s start with a simple example

const a = 1;  
const b = 1;  
console.log(a === b); // true  

Here, a and b are primitives (numbers). When you assign 1 to both variables, JavaScript treats them as the same value.

Get Supuna Warusawithana’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Now, compare this with objects

const a = [1];  
const b = [1];  
console.log(a === b); // false  

Even though the arrays look identical, they’re two separate objects in memory. JavaScript compares their references (memory addresses), not their contents.

Why This Happens: Copy by Value vs. Copy by Reference

• Primitives are copied by value
  When you assign a primitive to a variable, JavaScript stores the actual value.

let x = 10;  
let y = x; // y gets the *value* 10  
x = 20;  
console.log(y); // Still 10  

• Objects are copied by reference
  When you assign an object, JavaScript stores a reference to its memory location.

const userA = { name: "John" };  
const userB = userA; // userB points to the same memory as userA  
userA.name = "Mike";  
console.log(userB.name); // "Mike" (both variables reference the same object)  

Real-World Scenarios Where This Matters

1. Value Comparison Pitfalls

Imagine building a profile editor where a “Save” button should enable only if changes are made

const originalProfile = { name: "John" };  
const editedProfile = { name: "John" };  
console.log(originalProfile === editedProfile); // false 

Even if the objects have the same data, they’re different references. To compare contents, you’d need to check individual properties or use libraries like Lodash.

2. Function Parameters

Primitives and objects behave differently when passed to functions

// Primitive example (no side effect)  
function increment(age) {  
  age = age + 1;  
}  
let myAge = 15;  
increment(myAge);  
console.log(myAge); // Still 15

// Object example (side effect)  
function updateName(user) {  
  user.name = "Mike";  
}  
const me = { name: "John" };  
updateName(me);  
console.log(me.name); // "Mike" (original object modified)  

Primitives passed to functions create copies, leaving the original untouched. Objects, however, pass their reference, allowing functions to modify them.

Copying Values: Avoiding Unintended Mutations

Copying objects requires caution. For example

const original = { skill: "writing" };  
const copy = original;  
copy.skill = "coding";  
console.log(original.skill); // "coding"

To create a true copy, use methods like Object.assign or the spread operator

const safeCopy = { ...original };  
safeCopy.skill = "coding";  
console.log(original.skill); // "writing" (original intact)  

Why Should You Care?

1. Debugging: Many bugs stem from unintended object mutations.
2. Performance: Unnecessary object copies waste memory.
3. Interviews: This topic is a favorite in technical screenings.

Final Thoughts

Understanding value vs. reference is like unlocking a secret layer of JavaScript. It explains why your comparisons fail, why functions alter variables unexpectedly, and how to write efficient, bug-free code.

Happy Coding 🧑‍💻