Content is user-generated and unverified.

JavaScript Data Types: Mutable vs Immutable - Beginner's Guide

What is Mutability?

Mutability refers to whether a data type can be changed after it's created:

  • Mutable = Can be changed
  • Immutable = Cannot be changed

Quick Reference Table

Data TypeMutableImmutableExample
Number❌✅42, 3.14
String❌✅"hello", 'world'
Boolean❌✅true, false
Undefined❌✅undefined
Null❌✅null
Symbol❌✅Symbol('id')
BigInt❌✅123n
Object✅❌{name: "John"}
Array✅❌[1, 2, 3]
Function✅❌function() {}

Memory Trick 🧠

Primitive = Immutable
Non-Primitive (Object, Array, Function) = Mutable

Understanding Immutable (Primitive Types)

What "Immutable" Really Means

When we say primitives are immutable, it means the value itself cannot be changed. You can reassign the variable, but you're not changing the original value.

javascript
// ✅ This is reassignment (creating a new value)
let message = "Hello";
message = "Hi there";  // Creates new string, doesn't change "Hello"

// ❌ This would be mutation (if it were possible)
message[0] = "h";  // This doesn't work! Strings can't be mutated
console.log(message); // Still "Hi there"

Examples with Different Primitives

javascript
// Numbers
let age = 25;
age = 26;  // New number created, 25 is unchanged

// Booleans
let isActive = true;
isActive = false;  // New boolean created, true is unchanged

// Strings
let name = "Alice";
name = name.toUpperCase();  // Creates "ALICE", doesn't change "Alice"

Understanding Mutable (Non-Primitive Types)

Objects Can Be Changed

javascript
const person = {
    name: "John",
    age: 30
};

// ✅ This mutates the object
person.name = "Jane";        // Changes the property
person.city = "New York";    // Adds new property
delete person.age;           // Removes property

console.log(person); // { name: "Jane", city: "New York" }

Arrays Can Be Changed

javascript
const fruits = ["apple", "banana"];

// ✅ These mutate the array
fruits.push("orange");       // Adds element
fruits[0] = "grape";         // Changes element
fruits.pop();                // Removes element

console.log(fruits); // ["grape", "banana"]

Functions Can Be Changed

javascript
function greet() {
    return "Hello";
}

// ✅ This mutates the function object
greet.customProperty = "I'm a function!";
console.log(greet.customProperty); // "I'm a function!"

Common Beginner Mistakes

Mistake 1: Thinking const Makes Everything Immutable

javascript
// ❌ Common misconception
const numbers = [1, 2, 3];
numbers.push(4);  // This works! Array is still mutable
console.log(numbers); // [1, 2, 3, 4]

// ✅ const prevents reassignment, not mutation
// numbers = [5, 6, 7];  // This would cause an error

Mistake 2: Trying to Mutate Strings

javascript
// ❌ This doesn't work
let text = "hello";
text[0] = "H";  // Fails silently or throws error in strict mode
console.log(text); // Still "hello"

// ✅ Create a new string instead
text = "H" + text.slice(1);
console.log(text); // "Hello"

Practical Examples

Working with Immutable Data

javascript
// When you want to "change" a primitive, create a new one
let score = 100;
score = score + 10;  // Creates new number: 110

let message = "Hello";
message = message + " World";  // Creates new string: "Hello World"

Working with Mutable Data

javascript
// Objects: Change properties directly
const user = { name: "Alice", points: 100 };
user.points += 10;  // Mutates the object
user.level = "Pro";  // Adds new property

// Arrays: Use methods that modify the array
const tasks = ["eat", "sleep"];
tasks.push("code");     // Mutates array
tasks[0] = "wake up";   // Mutates array

Why Does This Matter?

Understanding mutability helps you:

  1. Avoid bugs - Know when you're changing data vs creating new data
  2. Write better code - Choose the right approach for your needs
  3. Understand frameworks - Many JavaScript frameworks rely on these concepts
  4. Debug effectively - Trace how your data changes through your program

Quick Test Your Knowledge

javascript
// What happens here?
const obj = { count: 1 };
const newObj = obj;
newObj.count = 2;

console.log(obj.count);     // What will this show?
console.log(newObj.count);  // What will this show?

// Answer: Both show 2! Objects are mutable and both variables 
// reference the same object in memory.
javascript
// What about this?
let str1 = "hello";
let str2 = str1;
str2 = "world";

console.log(str1);  // What will this show?
console.log(str2);  // What will this show?

// Answer: str1 shows "hello", str2 shows "world"
// Strings are immutable, so str2 gets a new string value

Summary

  • Primitive types (Number, String, Boolean, etc.) are immutable
  • Non-primitive types (Object, Array, Function) are mutable
  • Use the memory trick: Primitive = Immutable, Non-Primitive = Mutable
  • Understanding mutability helps you write better, bug-free JavaScript code!
Content is user-generated and unverified.
    JavaScript Data Types: Mutable vs Immutable - Beginner's Guide | Claude