Unlock the Power of JavaScript Immutability: Predictable Development!

JavaScript, the dynamic programming language that powers the web, continues to evolve with exciting new features.

From enhanced syntax and improved performance to advanced functionalities, these updates unlock a world of possibilities for developers.

Get ready to embrace the latest innovations and take your JavaScript coding to the next level.

Immutability

-> Immutability in JavaScript refers to the concept of creating and working with data structures that cannot be modified once they are created. Instead of directly modifying existing data, immutable programming promotes creating new copies with the desired changes.

In JavaScript, primitive values (like numbers and strings) are immutable by default, meaning their values cannot be changed once assigned.

Some techniques to achieve immutability

1. Object spread syntax: Create a new object by spreading the properties of an existing object and adding or overriding specific properties.

const originalObject = { a: 1, b: 2 };
const newObject = { ...originalObject, c: 3 };

Only makes immutable to the number of degrees you spread the object.

**2. Array methods: **Use array methods like concat(), slice(), and map() to create new arrays based on existing ones, instead of directly modifying them.

const originalArray = [1, 2, 3];
const newArray = originalArray.concat(4);

3. Object.assign(): Merge objects together by using Object.assign() to create a new object, rather than modifying the original objects.

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const mergedObject = Object.assign({}, obj1, obj2);

Now we also have with, toSorted and toRevese (relatively new and not supported on all browsers)

4. StructuredClone (aka deep copy)
-> The purpose of a StructuredClone function is typically to create a deep copy of an object or array in a structured manner, preserving the original data's structure and references.

for example

const original = {
  name: "John",
  age: 30,
  hobbies: ["reading", "coding"],
  address: {
    street: "123 Main St",
    city: "New York"
  }
};

const duplicate = structuredClone(original)

// now duplicate is a deeply copied object which has 
a brand new memory reference.

Hope this was a good read. Will also bring new css feature in next blog. Please check out the below package.

Extras

** I also have a new package for generating results from incoming api responses. If your backend devs send you multiple api's to fetch from this package helps you **

jx-response-generator - npm

A simple library that helps developers to make quick api responses from multiple responses.. Latest version: 1.0.8, last published: a year ago. Start using jx-response-generator in your project by running `npm i jx-response-generator`. There are no other projects in the npm registry using jx-response-generator.

npmjs.com