Creating Immutable Arrays

Creating Immutable Arrays

There are two main ways to create immutable arrays:

  • Using array concat method

  • Using spread operator


Using array concat method:

Suppose, we've a list of numbers:

const numbers = [1, 2, 3, 4];


Then to add a new number to the array we can use the array concat method as shown below:

const numbers = [1, 2, 3, 4];
const newNumbers = numbers.concat(5);

console.log(numbers); // [1, 2, 3, 4]
console.log(newNumbers); // [1, 2, 3, 4, 5]


As you can see, the array concat method returns a new array instead of changing the original array.

Note that, the array push method changes the original array so we can't use the array push method to add a new element to the array.

Using spread operator:

Take a look at the below code:

const numbers = [1, 2, 3, 4];
const newNumbers = [...numbers, 5];

console.log(numbers); // [1, 2, 3, 4]
console.log(newNumbers); // [1, 2, 3, 4, 5]


As you can see, using the spread operator also produces a new array without changing the original array.

You can use either the array concat method or spread operator to create an immutable array. 

We will be using the spread operator for creating a new array as it's easy to understand and is a preferred way of creating new arrays when working in React.

Getting Started With Zustand

Buy nowLearn more

Zustand Basics

  • How To Follow This Course
  • Need of Using State Management Library Like Zustand
  • Getting Started With Zustand
  • Zustand Overview
  • Building Application Using Async API Calls + Setting Up Devtool
  • Simplifying Code Using Selectors
  • Extra Tip When Working With TypeScript Code
  • This Powerful Feature Is Available Only In Zustand
  • Don't Make This Mistake With Middleware Otherwise It Will Cost You A Lot

Building User Management App

  • Application Demo
  • Setting Up Project With Zustand + Implementing Users List Page
  • Implementing Add User Functionality With React Hook Form + Zod Validation
  • Implementing Delete User Functionality + Setting Up Devtool
  • Implementing Update User Functionality
  • Implementing Latest Updated User Card Highlight Functionality
  • Learn How To Debug Issue In Highlight Functionality - Learn Debugging Step-by-step
  • Need Of Immutable Updates
  • Understanding Primitive and Reference Types
  • Creating Immutable Objects
  • Creating Immutable Arrays
  • Understanding Issues With Direct State Mutation
  • Immutably Updating Nested Properties Of User Manually
  • Immutably Updating Nested Properties Of User Using Immer.js (Recommended)
  • Using State Updater Syntax In Zustand Store
  • Making Street Number Optional In Edit User Screen
  • Code Refactoring - Creating Custom Hooks For Business Logic
  • Completing The User Management App - Final Code Changes
  • Adding Favicon - Final Video
  • final-source-code.zip

Building Ecommerce Application

  • Application Demo
  • Setting Up Project + Creating Initial Pages
  • Setting Up Store + Fetching Products From API + Creating Products Page With Filters
  • Displaying Products In Grid And List View
  • Filtering Products Based On Category And Sort By Selection
  • Working On Product Details Page And Handling Loading And Error State
  • Building Product Details Page UI
  • Displaying Related Products On Product Details Page
  • Setting Up Cart Store + Implementing Add To Cart Functionality
  • How To Avoid Losing Items Added In Cart On Page Refresh
  • Building Cart Page Showing Cart Items + Order Summary
  • Implementing Cart Page Actions - Update Quantity, Remove Item From Cart, Clear Cart, Place Order
  • Creating Favicon
  • Final Responsive Design Changes + Minor UI Fixes - Final Video
  • final-source-code.zip

Challenge Application

  • Demo Of The Application You Can Build As A Challenge