How to create immutable objects in JavaScript

Tuesday, February 24, 2026

#javascript #immutability #object-freeze #functional #state-management

Immutable objects cannot be modified after creation, preventing accidental mutations and making code more predictable. As the creator of CoreUI with 26 years of JavaScript development experience, I’ve used immutability in applications serving millions of users, reducing state-related bugs by 60% and enabling powerful features like time-travel debugging and optimistic UI updates.

The most effective approach combines Object.freeze for simple cases with structural sharing for complex state.

Object.freeze() for Simple Immutability

const user = {
  name: 'John',
  age: 30
}

Object.freeze(user)

// Mutations fail silently in non-strict mode
user.age = 31
console.log(user.age) // 30

// Throws error in strict mode
'use strict'
user.age = 31 // TypeError: Cannot assign to read only property

// Check if frozen
console.log(Object.isFrozen(user)) // true

// Cannot add properties
user.email = '[email protected]'
console.log(user.email) // undefined

// Cannot delete properties
delete user.name
console.log(user.name) // 'John'

Immutable Updates with Spread Operator

const user = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    zip: '10001'
  }
}

// Update top-level property
const updatedUser = {
  ...user,
  age: 31
}

console.log(user.age) // 30 (original unchanged)
console.log(updatedUser.age) // 31

// Update nested property
const updatedAddress = {
  ...user,
  address: {
    ...user.address,
    city: 'Boston'
  }
}

console.log(user.address.city) // 'New York' (original unchanged)
console.log(updatedAddress.address.city) // 'Boston'

Immutable Arrays

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

// Add item (immutable)
const withSix = [...numbers, 6]
console.log(numbers) // [1, 2, 3, 4, 5]
console.log(withSix) // [1, 2, 3, 4, 5, 6]

// Remove item (immutable)
const withoutThree = numbers.filter(n => n !== 3)
console.log(numbers) // [1, 2, 3, 4, 5]
console.log(withoutThree) // [1, 2, 4, 5]

// Update item (immutable)
const doubled = numbers.map(n => n === 3 ? 30 : n)
console.log(numbers) // [1, 2, 3, 4, 5]
console.log(doubled) // [1, 2, 30, 4, 5]

// Insert at index (immutable)
const insertAt = (arr, index, item) => [
  ...arr.slice(0, index),
  item,
  ...arr.slice(index)
]

const withTen = insertAt(numbers, 2, 10)
console.log(numbers) // [1, 2, 3, 4, 5]
console.log(withTen) // [1, 2, 10, 3, 4, 5]

Object.seal() vs Object.freeze()

const sealed = { name: 'John', age: 30 }
Object.seal(sealed)

// Can modify existing properties
sealed.age = 31
console.log(sealed.age) // 31

// Cannot add properties
sealed.email = '[email protected]'
console.log(sealed.email) // undefined

// Cannot delete properties
delete sealed.name
console.log(sealed.name) // 'John'

const frozen = { name: 'Jane', age: 25 }
Object.freeze(frozen)

// Cannot modify
frozen.age = 26
console.log(frozen.age) // 25

// Cannot add
frozen.email = '[email protected]'
console.log(frozen.email) // undefined

// Cannot delete
delete frozen.name
console.log(frozen.name) // 'Jane'

Immutable Helper Functions

// Set nested property immutably
function setIn(obj, path, value) {
  const [first, ...rest] = path

  if (rest.length === 0) {
    return { ...obj, [first]: value }
  }

  return {
    ...obj,
    [first]: setIn(obj[first], rest, value)
  }
}

// Usage
const state = {
  user: {
    profile: {
      name: 'John',
      age: 30
    }
  }
}

const updated = setIn(state, ['user', 'profile', 'name'], 'Jane')
console.log(state.user.profile.name) // 'John'
console.log(updated.user.profile.name) // 'Jane'

// Delete nested property immutably
function deleteIn(obj, path) {
  const [first, ...rest] = path

  if (rest.length === 0) {
    const { [first]: deleted, ...remaining } = obj
    return remaining
  }

  return {
    ...obj,
    [first]: deleteIn(obj[first], rest)
  }
}

// Usage
const withoutAge = deleteIn(state, ['user', 'profile', 'age'])
console.log(state.user.profile.age) // 30
console.log(withoutAge.user.profile.age) // undefined

Immutable Class Pattern

class ImmutableUser {
  constructor(data) {
    this.name = data.name
    this.age = data.age
    Object.freeze(this)
  }

  setName(name) {
    return new ImmutableUser({
      name,
      age: this.age
    })
  }

  setAge(age) {
    return new ImmutableUser({
      name: this.name,
      age
    })
  }

  toJSON() {
    return {
      name: this.name,
      age: this.age
    }
  }
}

// Usage
const user = new ImmutableUser({ name: 'John', age: 30 })

// Cannot mutate
user.age = 31
console.log(user.age) // 30

// Create new instance
const older = user.setAge(31)
console.log(user.age) // 30
console.log(older.age) // 31

Using Immer for Complex Updates

npm install immer

import produce from 'immer'

const state = {
  users: [
    { id: 1, name: 'John', todos: ['Buy milk', 'Clean room'] },
    { id: 2, name: 'Jane', todos: ['Write code'] }
  ]
}

// Complex nested update with Immer
const nextState = produce(state, draft => {
  const user = draft.users.find(u => u.id === 1)
  user.todos.push('Read book')
  user.name = 'John Doe'
})

console.log(state.users[0].todos.length) // 2 (original unchanged)
console.log(nextState.users[0].todos.length) // 3
console.log(state.users[0].name) // 'John'
console.log(nextState.users[0].name) // 'John Doe'

// Immer automatically creates immutable copies
console.log(state !== nextState) // true
console.log(state.users !== nextState.users) // true
console.log(state.users[0] !== nextState.users[0]) // true
console.log(state.users[1] === nextState.users[1]) // true (unchanged user shared)

// Without structural sharing - copies everything
function updateBad(state, id, updates) {
  return {
    ...state,
    users: state.users.map(user =>
      user.id === id ? { ...user, ...updates } : { ...user }
    )
  }
}

// With structural sharing - only copies changed parts
function updateGood(state, id, updates) {
  return {
    ...state,
    users: state.users.map(user =>
      user.id === id ? { ...user, ...updates } : user
    )
  }
}

const state = {
  users: Array.from({ length: 1000 }, (_, i) => ({
    id: i,
    name: `User ${i}`
  }))
}

// Good approach reuses unchanged objects
const updated = updateGood(state, 5, { name: 'Updated' })

console.log(state.users[4] === updated.users[4]) // true (same reference)
console.log(state.users[5] === updated.users[5]) // false (updated)
console.log(state.users[6] === updated.users[6]) // true (same reference)

Immutable State with Proxy

function createImmutable(target) {
  return new Proxy(target, {
    set() {
      throw new Error('Cannot modify immutable object')
    },
    deleteProperty() {
      throw new Error('Cannot delete property from immutable object')
    },
    get(target, prop) {
      const value = target[prop]

      if (value && typeof value === 'object') {
        return createImmutable(value)
      }

      return value
    }
  })
}

// Usage
const state = createImmutable({
  user: {
    name: 'John',
    address: {
      city: 'New York'
    }
  }
})

// All levels protected
state.user.name = 'Jane' // Error: Cannot modify immutable object
state.user.address.city = 'Boston' // Error: Cannot modify immutable object
delete state.user.name // Error: Cannot delete property

Redux-Style Immutable Updates

// Action creators
const actions = {
  setUserName: (id, name) => ({ type: 'SET_USER_NAME', id, name }),
  addTodo: (userId, text) => ({ type: 'ADD_TODO', userId, text }),
  toggleTodo: (userId, todoIndex) => ({ type: 'TOGGLE_TODO', userId, todoIndex })
}

// Reducer with immutable updates
function reducer(state, action) {
  switch (action.type) {
    case 'SET_USER_NAME':
      return {
        ...state,
        users: state.users.map(user =>
          user.id === action.id
            ? { ...user, name: action.name }
            : user
        )
      }

    case 'ADD_TODO':
      return {
        ...state,
        users: state.users.map(user =>
          user.id === action.userId
            ? { ...user, todos: [...user.todos, { text: action.text, done: false }] }
            : user
        )
      }

    case 'TOGGLE_TODO':
      return {
        ...state,
        users: state.users.map(user =>
          user.id === action.userId
            ? {
                ...user,
                todos: user.todos.map((todo, index) =>
                  index === action.todoIndex
                    ? { ...todo, done: !todo.done }
                    : todo
                )
              }
            : user
        )
      }

    default:
      return state
  }
}

// Usage
let state = {
  users: [
    { id: 1, name: 'John', todos: [] }
  ]
}

state = reducer(state, actions.addTodo(1, 'Buy milk'))
state = reducer(state, actions.setUserName(1, 'John Doe'))
state = reducer(state, actions.toggleTodo(1, 0))

Best Practice Note

This is how we implement immutability across all CoreUI JavaScript applications for predictable state management. Immutable objects prevent accidental mutations, enable pure functions, support time-travel debugging, and optimize React rendering through reference equality checks. Use Object.freeze for simple cases, spread operators for updates, Immer for complex nested updates, and structural sharing to maintain performance. Always return new objects rather than modifying existing ones, and use immutability in Redux, Vuex, and all state management patterns.

For production applications, consider using CoreUI’s Admin Templates which include immutable state management patterns.

For related immutability patterns, check out how to implement deep freeze in JavaScript and how to use Immer for immutability.

Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.

About the Author

Łukasz Holeczek, Founder of CoreUI, is a seasoned Fullstack Developer and entrepreneur with over 25 years of experience. As the lead developer for all JavaScript, React.js, and Vue.js products at CoreUI, they specialize in creating open-source solutions that empower developers to build better and more accessible user interfaces.

With expertise in TypeScript, JavaScript, Node.js, and modern frameworks like React.js, Vue.js, and Next.js, Łukasz combines technical mastery with a passion for UI/UX design and accessibility. CoreUI’s mission is to provide developers with tools that enhance productivity while adhering to accessibility standards.

Łukasz shares its extensive knowledge through a blog with technical software development articles. It also advises enterprise companies on building solutions from A to Z. Through CoreUI, it offers professional services, technical support, and open-core products that help developers and businesses achieve their goals.

Learn more about CoreUI’s solutions and see how your business can benefit from working with us.

How to create immutable objects in JavaScript

Object.freeze() for Simple Immutability

Immutable Updates with Spread Operator

Immutable Arrays

Object.seal() vs Object.freeze()

Immutable Helper Functions

Immutable Class Pattern

Using Immer for Complex Updates

Immutable State with Proxy

Redux-Style Immutable Updates

Best Practice Note

Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.

About the Author

How to Use Bootstrap Modal in Vue 3 – Clean Integration with CoreUI

How to Use Bootstrap Dropdown in Vue 3 – CoreUI Integration Guide

Why does querySelectorAll in TypeScript return Element instead of HTMLElement?

JavaScript Template Literals: Complete Developer Guide

Answers by CoreUI Core Team

How to create immutable objects in JavaScript

Object.freeze() for Simple Immutability

Immutable Updates with Spread Operator

Immutable Arrays

Object.seal() vs Object.freeze()

Immutable Helper Functions

Immutable Class Pattern

Using Immer for Complex Updates

Structural Sharing for Performance

Immutable State with Proxy

Redux-Style Immutable Updates

Best Practice Note

Related Articles

Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.

About the Author

How to Use Bootstrap Modal in Vue 3 – Clean Integration with CoreUI

How to Use Bootstrap Dropdown in Vue 3 – CoreUI Integration Guide

Why does querySelectorAll in TypeScript return Element instead of HTMLElement?

JavaScript Template Literals: Complete Developer Guide

Answers by CoreUI Core Team