![[The AI Show Episode 143]: ChatGPT Revenue Surge, New AGI Timelines, Amazon’s AI Agent, Claude for Education, Model Context Protocol & LLMs Pass the Turing Test](https://www.marketingaiinstitute.com/hubfs/ep%20143%20cover.png)
![From drop-out to software architect with Jason Lengstorf [Podcast #167]](https://cdn.hashnode.com/res/hashnode/image/upload/v1743796461357/f3d19cd7-e6f5-4d7c-8bfc-eb974bc8da68.png?#)
.png?width=1920&height=1920&fit=bounds&quality=70&format=jpg&auto=webp#)
.png?width=1920&height=1920&fit=bounds&quality=70&format=jpg&auto=webp#)
![Apple Rushes Five Planes of iPhones to US Ahead of New Tariffs [Report]](https://www.iclarified.com/images/news/96967/96967/96967-640.jpg)
![Apple Vision Pro 2 Allegedly in Production Ahead of 2025 Launch [Rumor]](https://www.iclarified.com/images/news/96965/96965/96965-640.jpg)
What is Immutability in JavaScript?
Immutability is a powerful concept in programming and especially important in JavaScript, even if we don't always think about it. It affects how we manage data, state and side effects in our applications. In this post, we'll break down what immutability means, why it matters and how you can work with it in practice. What is Immutability? Basically Immutability means something cannot be changed after it's created. For example in JavaScript, primitive values like numbers, strings and booleans are immutable. This doesn't mean the variable can't be reassigned, it means the value itself can't be changed in place. Example with a string: let name = 'Matsu'; // Trying to change just one character (this won't work) name[0] = 'B'; console.log(name); // 'Matsu' → Still the same // But we can reassign the variable name = 'John'; console.log(name); // 'John' So the string itself is immutable but the variable name can be reassigned to a new string. In contrast, objects and arrays are mutable by default, which means you can change their contents directly. Example with an object: const user = { name: 'Matsu' }; // Modifying the object user.name = 'John'; console.log(user); // { name: 'John' } This can lead to unintended side effects, especially when multiple parts of your code are referencing and modifying the same object or array, such as shared data or state. What Can Immutability Do? Avoid side effects (accidentally changing shared data); Make debugging easier (state doesn't change in hidden ways); Improve performance in some cases (e.g. with reference checks); Work better with frameworks like React, which rely on state changes via new objects; Working with Immutability in JavaScript To keep data immutable, we usually create new copies instead of modifying the original. Copying Arrays const numbers = [1, 2, 3]; // Instead of: numbers.push(4) const newNumbers = [...numbers, 4]; console.log(numbers); // [1, 2, 3] console.log(newNumbers); // [1, 2, 3, 4] Copying Objects const user = { name: 'Matsu', age: 28 }; // Instead of: user.age = 29 const updatedUser = { ...user, age: 29 }; console.log(user); // { name: 'Matsu', age: 28 } console.log(updatedUser); // { name: 'Matsu', age: 29 } Attention with Deep Copy vs Shallow Copy Most techniques (like spread (...) and Object.assign) create shallow copies. This means only top-level properties are copied. If the object contains nested objects, those nested references remain shared between the original and the copy. const person = { name: 'Matsu', address: { city: 'Tokyo' } }; const clone = { ...person }; clone.address.city = 'Osaka'; console.log(person.address.city); //
Immutability is a powerful concept in programming and especially important in JavaScript, even if we don't always think about it. It affects how we manage data, state and side effects in our applications.
In this post, we'll break down what immutability means, why it matters and how you can work with it in practice.
What is Immutability?
Basically Immutability means something cannot be changed after it's created. For example in JavaScript, primitive values like numbers, strings and booleans are immutable. This doesn't mean the variable can't be reassigned, it means the value itself can't be changed in place.
Example with a string:
let name = 'Matsu';
// Trying to change just one character (this won't work)
name[0] = 'B';
console.log(name); // 'Matsu' → Still the same
// But we can reassign the variable
name = 'John';
console.log(name); // 'John'
So the string itself is immutable but the variable name can be reassigned to a new string. In contrast, objects and arrays are mutable by default, which means you can change their contents directly.
Example with an object:
const user = { name: 'Matsu' };
// Modifying the object
user.name = 'John';
console.log(user); // { name: 'John' }
This can lead to unintended side effects, especially when multiple parts of your code are referencing and modifying the same object or array, such as shared data or state.
What Can Immutability Do?
- Avoid side effects (accidentally changing shared data);
- Make debugging easier (state doesn't change in hidden ways);
- Improve performance in some cases (e.g. with reference checks);
- Work better with frameworks like React, which rely on state changes via new objects;
Working with Immutability in JavaScript
To keep data immutable, we usually create new copies instead of modifying the original.
Copying Arrays
const numbers = [1, 2, 3];
// Instead of: numbers.push(4)
const newNumbers = [...numbers, 4];
console.log(numbers); // [1, 2, 3]
console.log(newNumbers); // [1, 2, 3, 4]
Copying Objects
const user = { name: 'Matsu', age: 28 };
// Instead of: user.age = 29
const updatedUser = { ...user, age: 29 };
console.log(user); // { name: 'Matsu', age: 28 }
console.log(updatedUser); // { name: 'Matsu', age: 29 }
Attention with Deep Copy vs Shallow Copy
Most techniques (like spread (...) and Object.assign) create shallow copies. This means only top-level properties are copied. If the object contains nested objects, those nested references remain shared between the original and the copy.
const person = {
name: 'Matsu',
address: { city: 'Tokyo' }
};
const clone = { ...person };
clone.address.city = 'Osaka';
console.log(person.address.city); // 
