Modern JavaScript (ES2023)

Immutable Array Methods

Sort, reverse, and modify arrays without changing the original!

Find videos you like?

Save to resource drawer for future reference!

What are Immutable Array Methods?

ES2023 adds four new methods that return new arrays instead of modifying the original!toSorted(),toReversed(),toSpliced(), andwith() are the immutable versions of existing methods!

Immutability FTW!

These methods never change the original array. Perfect for React, functional programming, and avoiding bugs!

The Four Immutable Methods

🔄

toSorted()

Immutable version of sort()

↩️

toReversed()

Immutable version of reverse()

✂️

toSpliced()

Immutable version of splice()

📝

with()

Change one element immutably

Example 1: toSorted() and toReversed()

Sort and reverse without mutating

javascript

code

DarkEditable

// toSorted() - immutable sort
const numbers = [3, 1, 4, 1, 5, 9, 2];

// Old way - mutates original
const sorted1 = numbers.sort();
console.log(numbers);  // [1, 1, 2, 3, 4, 5, 9] ❌ Original changed!

// New way - keeps original
const numbers2 = [3, 1, 4, 1, 5, 9, 2];
const sorted2 = numbers2.toSorted();
console.log(numbers2);  // [3, 1, 4, 1, 5, 9, 2] ✅ Original intact!
console.log(sorted2);   // [1, 1, 2, 3, 4, 5, 9]

// Custom sort function works too
const items = [
  { name: 'Apple', price: 2 },
  { name: 'Banana', price: 1 },
  { name: 'Cherry', price: 3 }
];

const byPrice = items.toSorted((a, b) => a.price - b.price);
console.log(items[0].name);   // "Apple" ✅ Original unchanged
console.log(byPrice[0].name); // "Banana" (cheapest)

// toReversed() - immutable reverse
const letters = ['a', 'b', 'c', 'd'];

// Old way - mutates
const reversed1 = letters.reverse();
console.log(letters);  // ['d', 'c', 'b', 'a'] ❌ Original changed!

// New way - keeps original
const letters2 = ['a', 'b', 'c', 'd'];
const reversed2 = letters2.toReversed();
console.log(letters2);  // ['a', 'b', 'c', 'd'] ✅ Original intact!
console.log(reversed2); // ['d', 'c', 'b', 'a']

Console Output

Click "Run Code" to see output here...

Example 2: toSpliced() and with()

Modify arrays immutably

javascript

code

DarkEditable

// toSpliced() - immutable splice
const fruits = ['apple', 'banana', 'cherry', 'date'];

// Old way - mutates original
const removed = fruits.splice(1, 2, 'blueberry');
console.log(fruits);  // ['apple', 'blueberry', 'date'] ❌ Mutated!

// New way - keeps original
const fruits2 = ['apple', 'banana', 'cherry', 'date'];
const newFruits = fruits2.toSpliced(1, 2, 'blueberry');
console.log(fruits2);    // ['apple', 'banana', 'cherry', 'date'] ✅
console.log(newFruits);  // ['apple', 'blueberry', 'date']

// Remove elements
const nums = [1, 2, 3, 4, 5];
const removed2 = nums.toSpliced(2, 2);  // Remove 2 elements from index 2
console.log(nums);      // [1, 2, 3, 4, 5] ✅ Original intact
console.log(removed2);  // [1, 2, 5]

// Insert elements
const colors = ['red', 'blue'];
const inserted = colors.toSpliced(1, 0, 'green', 'yellow');
console.log(colors);    // ['red', 'blue'] ✅
console.log(inserted);  // ['red', 'green', 'yellow', 'blue']

// with() - change single element
const scores = [85, 90, 78, 92];

// Old way - direct mutation
scores[1] = 95;
console.log(scores);  // [85, 95, 78, 92] ❌ Mutated!

// New way - immutable
const scores2 = [85, 90, 78, 92];
const updated = scores2.with(1, 95);
console.log(scores2);  // [85, 90, 78, 92] ✅ Original intact!
console.log(updated);  // [85, 95, 78, 92]

// Negative indices work!
const arr = [10, 20, 30, 40];
const changed = arr.with(-1, 99);  // Change last element
console.log(arr);     // [10, 20, 30, 40] ✅
console.log(changed); // [10, 20, 30, 99]

Console Output

Click "Run Code" to see output here...

Mutable vs Immutable

Mutable (Old)	→	Immutable (New)
`sort()`	→	`toSorted()`
`reverse()`	→	`toReversed()`
`splice()`	→	`toSpliced()`
`arr[i] = x`	→	`with(i, x)`

Key Takeaways

📋

Returns Copy

All four methods return new arrays

✅

Original Safe

Original array never modified

⚛️

React Friendly

Perfect for state updates in React

💡

ES2023

Latest immutability features

Previous Topic

Array findLast/findLastIndex

Finding array elements from the end (ES2023).

Next Topic

Hashbang Grammar

#! for executable JavaScript files in Node.js (ES2023).

Ask a Question

Have a question about Immutable Array Methods? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

Modern JavaScript (ES2023)

Immutable Array Methods

Sort, reverse, and modify arrays without changing the original!

Find videos you like?

Save to resource drawer for future reference!

What are Immutable Array Methods?

ES2023 adds four new methods that return new arrays instead of modifying the original!toSorted(),toReversed(),toSpliced(), andwith() are the immutable versions of existing methods!

Immutability FTW!

These methods never change the original array. Perfect for React, functional programming, and avoiding bugs!

The Four Immutable Methods

🔄

toSorted()

Immutable version of sort()

↩️

toReversed()

Immutable version of reverse()

✂️

toSpliced()

Immutable version of splice()

📝

with()

Change one element immutably

Example 1: toSorted() and toReversed()

Sort and reverse without mutating

javascript

code

DarkEditable

// toSorted() - immutable sort
const numbers = [3, 1, 4, 1, 5, 9, 2];

// Old way - mutates original
const sorted1 = numbers.sort();
console.log(numbers);  // [1, 1, 2, 3, 4, 5, 9] ❌ Original changed!

// Custom sort function works too
const items = [
  { name: 'Apple', price: 2 },
  { name: 'Banana', price: 1 },
  { name: 'Cherry', price: 3 }
];

const byPrice = items.toSorted((a, b) => a.price - b.price);
console.log(items[0].name);   // "Apple" ✅ Original unchanged
console.log(byPrice[0].name); // "Banana" (cheapest)

// toReversed() - immutable reverse
const letters = ['a', 'b', 'c', 'd'];

// Old way - mutates
const reversed1 = letters.reverse();
console.log(letters);  // ['d', 'c', 'b', 'a'] ❌ Original changed!

Console Output

Click "Run Code" to see output here...

Example 2: toSpliced() and with()

Modify arrays immutably

javascript

code

DarkEditable

// toSpliced() - immutable splice
const fruits = ['apple', 'banana', 'cherry', 'date'];

// Old way - mutates original
const removed = fruits.splice(1, 2, 'blueberry');
console.log(fruits);  // ['apple', 'blueberry', 'date'] ❌ Mutated!

// with() - change single element
const scores = [85, 90, 78, 92];

// Old way - direct mutation
scores[1] = 95;
console.log(scores);  // [85, 95, 78, 92] ❌ Mutated!

Console Output

Click "Run Code" to see output here...

Mutable vs Immutable

Mutable (Old)	→	Immutable (New)
`sort()`	→	`toSorted()`
`reverse()`	→	`toReversed()`
`splice()`	→	`toSpliced()`
`arr[i] = x`	→	`with(i, x)`

Key Takeaways

📋

Returns Copy

All four methods return new arrays

✅

Original Safe

Original array never modified

⚛️

React Friendly

Perfect for state updates in React

💡

ES2023

Latest immutability features

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Array findLast/findLastIndex

Hashbang Grammar

JavaScript Code Editor

Building Your Learning Module...

Immutable Array Methods

What are Immutable Array Methods?

Immutability FTW!

toSorted()

toReversed()

toSpliced()

with()

Example 1: toSorted() and toReversed()

Example 2: toSpliced() and with()

Key Takeaways

Returns Copy

Original Safe

React Friendly

ES2023

Array findLast/findLastIndex

Hashbang Grammar

JavaScript Code Editor

Immutable Array Methods

What are Immutable Array Methods?

Immutability FTW!

toSorted()

toReversed()

toSpliced()

with()

Example 1: toSorted() and toReversed()

Example 2: toSpliced() and with()

Key Takeaways

Returns Copy

Original Safe

React Friendly

ES2023