# Guarding JavaScript integrity: The dangers of object mutation and why to avoid it

Object mutation in JavaScript describes the process of changing an object's attributes or values after it has been initialized. This functionality offers a strong way to manage application state and dynamically modify data structures, but it also significantly increases the risk to the maintainability and integrity of the code.

By default, JavaScript objects are mutable, allowing developers to modify, add, or remove properties at will. However, this flexibility comes with inherent dangers that can compromise application reliability and performance.

Let's consider the following example:

// Original blog data
let originalBlog = { name: "OpenReplay", age: 5 };

// Function to update the blog's age property
function updateBlogAge(newAge) {
  blog.age = newAge; // Update the age property
  return blog;
}

// Function to add a new property
function addProperty(propertyName, propertyValue) {
  blog[propertyName] = propertyValue; // Add the new property
  return blog;
}

// Function to remove a property
function removeProperty(propertyName) {
  delete blog[propertyName]; // Remove the specified property
  return blog;
}

// Update the blog's age property
originalBlog = updateBlogAge(originalBlog, 3);

// Add a new property to the blog
originalBlog = addProperty(originalBlog, "numberOfArticles", 10000);

// Remove the age property from the blog
originalBlog = removeProperty(originalBlog, "age");

In this example, the `blog` object illustrates the dangers of object mutation, where its properties are modified, added, and removed post-initialization. This mutation compromises the integrity of the object and underscores the risks associated with dynamic changes to the object's state.

## Drawbacks of object mutation

While object mutation provides flexibility, it can also introduce challenges and unexpected behavior in code, particularly in larger and more complex applications. Some of the key drawbacks of object mutation include:

**Unintended side effects:**
Modifying objects in place can lead to unintended side effects elsewhere in the codebase, especially in shared or mutable data structures.

**Difficulty in tracking changes:**
In applications with extensive object mutations, it can become difficult to track where and when changes occur, making code maintenance and debugging more challenging.

**Introduces complexities:**
Immutable data structures, where objects cannot be changed after creation, offer benefits in terms of predictability and thread safety. Object mutation undermines these benefits and can lead to race conditions and data inconsistencies.

**Concurrency issues:**
In multi-threaded or asynchronous environments, object mutation can result in race conditions and concurrency issues if not properly managed.

**Code reusability:**
Mutable objects can be prone to unintended modifications when reused across different parts of the codebase, leading to code fragility and reduced reusability.

**Testing complexity:**
Testing code that relies heavily on object mutation can be challenging, as it may require extensive test coverage to account for all possible object states and interactions.

## Benefits of avoiding object mutation

Avoiding object mutation in JavaScript offers several benefits:

**Predictability**: Immutable objects are easier to reason about because their state does not change after creation. This predictability simplifies debugging and reduces the likelihood of unexpected behavior in your code.

**Concurrency**: Immutable data structures are inherently thread-safe, meaning they can be safely shared across multiple threads or processes without the risk of data corruption or race conditions. This is especially important in concurrent or parallel programming environments.

**Functional programming**: Immutability is a core principle of functional programming, which emphasizes the use of pure functions and immutable data structures. By avoiding object mutation, you can write more functional-style code, which tends to be more composable, testable, and maintainable.

**Performance optimization**: Immutable data structures can enable optimizations like memoization and structural sharing, which can improve performance by reducing the need for unnecessary object copies and memory allocations.

**Debugging and testing**: Immutable objects are inherently easier to debug and test because their state does not change over time. This makes it easier to isolate and reproduce bugs, as well as write deterministic unit tests.

**Reduced side effects**: Object mutation can lead to unintended side effects, especially in shared or global states. By avoiding mutation, you reduce the risk of unintended consequences and make your code more reliable and maintainable.

## Avoiding object mutation techniques

To mitigate the risks associated with object mutation, developers can adopt best practices for managing state and data in JavaScript applications:

**Immutability:**
Consider using immutable data structures and approaches, such as libraries like `Immutable.js` or the `Object.freeze()` method, to prevent unintended object mutation. Let's write some code to show how to use the `Immutable.js` library and the `Object.freeze()` method to avoid object mutation.

- **Immutable.js**
To use the `Immutable.js` library, we need to add it to our project. There are many [ways](https://immutable-js.com/) to do that but we will be using the external script method. In this article, we will be using `https://cdnjs.cloudflare.com/ajax/libs/immutable/4.3.5/immutable.min.js` as the `Immutable.js` script link. To get all the possible links to the `Immutable.js` script click [here](https://cdnjs.com/libraries/immutable).

<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/4.3.5/immutable.min.js"></script>
<script>
    // Assume we have an immutable map representing a blog
    let blog = Immutable.Map({ name: "OpenReplay", age: 5 });

    // Instead of directly modifying the object, we create a new immutable map with the updated value
    let updatedBlog = blog.set("numberOfArticles", 10000);

    // Now, let's access the numberOfArticles property from the updated immutable map
    let numberOfArticles = updatedBlog.get("numberOfArticles");

    // Display the number of articles
    console.log("Number of articles:", numberOfArticles); // This will print: Number of articles: 10000
</script>

The code above allowed us to assign an object to another variable and update it without mutating the object, i.e., adding a key `numberOfArticles` in `updatedBlog` did not add it in `blog`.

- **`Object.freeze` method**
`Object.freeze()` is a method in JavaScript used to freeze an object, preventing any changes to its properties. When you freeze an object, you make it immutable, meaning its properties cannot be added, removed, or modified in other words it is just read-only.

Here's how you can use `Object.freeze()`:

const blog = {
name: "openReplay",
numberOfArticles: 10000,
};

// Freeze the blog object to make it immutable
Object.freeze(blog);

// Attempt to modify the object
blog.name = "NewTechBlog"; // This modification will not take effect

// Access the value of name
const originalName = blog.name; // This will return "openReplay"

// Display the original value of name
console.log("Original blog name:", originalName);

In this example, calling `Object.freeze(blog)` freezes the `blog` object. After freezing, any attempt to modify its properties will be ignored, and no error will be thrown. The object remains in its current state, and any attempt to modify it will be silently ignored.

**Avoiding in-place modifications:**
Instead of modifying objects in place, consider creating copies or clones of objects when making changes, preserving the integrity of the original data. This can be achieved using the spread syntax and `Object.assign()` method. Let's write some code on how to implement them

- **Spread syntax**

let originalBlog = { name: "OpenReplay", age: 3 };

// Create a copy of the original blog with the updated number of articles
let updatedBlog = { ...originalBlog, numberOfArticles: 10000 };

The code above copied the `originalBlog` value to the `updatedBlog` variable using the spread syntax. Let's break it down. The part `{...originalBlog` unpacks the value of `originalBlog` into the new object (`updatedBlog`) and the remaining part `,numberOfArticles: 10000}` adds a property to the new object. Therefore, the syntax `{ ...originalBlog, numberOfArticles: 10000 }` unpacks the value of `originalBlog` into `updatedBlog` and adds another property to it. This way, any modification on `updatedBlog` doesn't affect `originalBlog`. What if we want to delete properties in an object? The best way to do this is to use JavaScript object destructuring.

Here is the syntax:

let originalBlog = { name: "OpenReplay", age: 5, numberOfArticles: 10000 };

// Remove the numberOfArticles property
let { numberOfArticles, ...updatedObject } = originalBlog;

console.log(updatedObject); // {name:"OpenReplay", age:5}

- **`Object.assign` method**
`Object.assign()` is a method in JavaScript used to copy the values of all enumerable properties from one or more source objects to a target object. It returns the target object after copying the properties.

Here's the syntax:

Object.assign(target, ...sources);

The `target` in the code above is the object to which properties will be copied, while `sources` are one or more source objects from which properties will be copied.
Since we have understood how to use the `Object.assign()` method, let's redo what we did with spread syntax using the `Object.assign()` method

let originalBlog = { name: "OpenReplay", age: 3 };

// Let's create a copy of originalBlog with the updated value
let updatedBlog = Object.assign({}, originalBlog, {
numberOfArticles: 10000,
});

The code above returns the same output as the spread syntax.

- **Drawbacks of spread and `Object.assign` method:**
There is a drawback with spread syntax and the `Object.assign()` method. They only copy the top-level properties of an object. If the object contains nested objects, they are still referenced rather than cloned. Therefore, changes to nested objects in the copied object will affect the original object, and vice versa. To solve this, we can use some packages like Lodash. Here is the [link](https://lodash.com/docs#cloneDeep) to how to use Lodash for a deep copy. If we don't want to install a new package just for a deep copy, There is good news for you. I developed a code that does the trick for me.

Here is the code:

function deep_copy(value_to_copy) {
let copied_value;
switch (typeof value_to_copy) {
  case "object":
    if (value_to_copy === null) {
      copied_value = value_to_copy;
    } else {
      switch (Object.prototype.toString.call(value_to_copy)) {
        case "[object Array]":
          copied_value = value_to_copy.map(deep_copy);
          break;
        case "[object Date]":
          copied_value = value_to_copy;
          break;
        case "[object RegExp]":
          copied_value = value_to_copy;
          break;
        default:
          copied_value = Object.keys(value_to_copy).reduce((prev, key) => {
            prev[key] = deep_copy(value_to_copy[key]);
            return prev;
          }, {});
          break;
      }
    }
    break;
  default:
    copied_value = value_to_copy;
    break;
}
return copied_value;
}

**Pure functions:**
Embrace functional programming principles and prefer pure functions, which do not mutate states and produce predictable outcomes based solely on their inputs. To achieve this we can use the clone method we have just discussed above to clone the object and then return the cloned object instead of modifying the object itself. Let's implement one

function addGreetMessage(blog) {
  // Clone the blog and add the greet property
  const updateBlog = { ...blog, greet: "Welcome to OpenReplay!" };
  return updateBlog;
}

This way it returns a new object instead of referencing the old one.

**State management libraries:**
Use state management libraries like Redux or MobX to centralize and manage the application state in a predictable and controlled manner.

## Practical cases showcasing the advantages of immutability

**React component state management**:
[React](https://react.dev/) uses state to manage component data. By using the `useState` hook, state updates are handled immutably through the `setState` function, ensuring predictable rendering and behavior.

import React, { useState } from "react";

const Counter = () => {
  // Using useState hook to manage state immutably
  const [count, setCount] = useState(0);

  const increment = () => {
    // Updating state immutably using setCount
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;

In the code above, when the user clicks on the `Increment` button, the `increment` function is called, and the `setCount` function updates the `count` variable immutably.

**Redux and Flux architecture**:
[Redux](https://redux.js.org/), a predictable state container, relies on immutable updates. Reducers return new state objects by spreading the previous state and applying changes, maintaining data integrity and enabling efficient state management.

// Reducer function in Redux
const counterReducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case "INCREMENT":
      // Returning a new state object immutably
      return { ...state, count: state.count + 1 };
    default:
      return state;
  }
};

Here, by using the spread syntax in the return statement `return {...state, count: state.count + 1};` Redux reducers return a new state object.

**Memoization and caching**:
Memoization improves performance by caching the results of expensive function calls. Immutable caching ensures that the cached data remains consistent and reliable across multiple invocations of the memoized function.

// Memoization function using a cache
const memoizedFunction = (fn) => {
  let cache = {};

  return (arg) => {
    if (arg in cache) {
      console.log("Fetching from cache...");
      return cache[arg];
    } else {
      console.log("Calculating result...");
      const result = fn(arg);
      cache = Object.assign({}, cache, { [arg]: result });
      return result;
    }
  };
};

// Example usage:
const square = (x) => {
  console.log("Calculating square...");
  return x * x;
};

const memoizedSquare = memoizedFunction(square);

console.log(memoizedSquare(5)); // Logs: Calculating square... and 25
console.log(memoizedSquare(5)); // Logs: Fetching from cache... and 25 (no recalculation)
console.log(memoizedSquare(10)); // Logs: Calculating square... and 100
console.log(memoizedSquare(10)); // Logs: Fetching from cache... and 100 (no recalculation)

The memoization function above maintains data consistency by making sure no object is modified. This is achieved by using the `Object.assign()` method `cache = Object.assign({}, cache, { [arg]: result });`.

**Concurrency and parallelism**:
Immutable data structures facilitate safe concurrent updates in multithreaded environments. By creating new objects instead of modifying existing ones, concurrent operations can proceed without the risk of data corruption or race conditions.

// Using immutable data structures to handle concurrency

// Original immutable data
const blog = { name: "OpenReplay" };

// Function to update data immutably
function updateData(data, newKeyValue) {
  return { ...data, ...newKeyValue }; // Creating a new object with updated data
}

// Simulating concurrent tasks accessing shared data
function concurrentTask(propToAdd) {
  // Each task operates on its own copy of the data
  const updatedData = updateData(blog, propToAdd);

  // Simulate processing time
  const processingTime = Math.floor(Math.random() * 1000); // Random processing time up to 1 second
  setTimeout(() => {
    console.log(`Task updated data:`, updatedData);
  }, processingTime);
}

// Simulate multiple concurrent tasks
for (let i = 0; i < 5; i++) {
  const numberOfArticle = (i + 1) * 10000;
  concurrentTask({ numberOfArticle });
}

The code above demonstrates the use of object immutability to handle concurrency. It initializes an original immutable data structure represented by an object named `blog`, updates data immutably using the `updateData` function, and simulates concurrent tasks accessing shared data using the `concurrentTask` function. Each task operates on its copy of the data and logs the updated data after a simulated processing time. The code also simulates multiple concurrent tasks by running a loop and updating the `blog` object with different data for each task.

These examples all show how immutability may be achieved by adding new objects or updating ones that already exist without changing the original data. This helps avoid unexpected side effects in the program and guarantees that the data integrity is maintained.

## Conclusion

There are several advantages to knowing and using JavaScript's immutability in a variety of software development contexts. Developers can achieve predictability and reliability, concurrency and parallelism, performance optimization, code maintainability, collaboration, and version control by avoiding object mutation and implementing immutable data structures. Developers can create applications that are resilient to the challenges of contemporary software development, scalability, maintainability, and immutability by utilizing functional programming concepts and immutable data. Accepting immutability is a fundamental paradigm shift that enables developers to build more streamlined, dependable code, in addition to being a best practice.