What is the state of immutability in Javascript in 2019?

Question

I'm all on board with functional programming in Javascript - particularly within the context of using React and Redux.

Something that I've been running into again and again, is how easy it is to accidentally mutate objects and create odd bugs.

That is, where the const keyword prevents the variable from being reassigned, it doesn't prevent the object itself from having its variables from being reassigned.

For example:

my-module.js

export const DEFAULT_HEADERS = {  //We are going to be using this const in other modules too. 
   foo: "foo"
}; 

export function someFunction(someCond) {
   const headers = DEFAULT_HEADERS; 
   if (someCond) {
       headers.foo = "bar"; //Don't do this!
   }
}; 

In this example - if we have imported DEFAULT_HEADERS to another module, we've mutated the value of foo, and screwed that up.

Now of course - the answer is to not reassign object properties like I have here.

But I don't have a way to prevent people from mutating objects like this.

Where this get more important, is when I have a should-be-immutable object that has a nested structure.

To do it correctly, we need to destructure the object at each level, as ...{} spread syntax only clones superficially.

For example:

const props = {
  alpha: {
    innerAlpha: {
      a: "aaa",
      b: "bbb",
    },

    innerAlphete: {
      b: "bbb",
      c: "ccc",
    }
  },

  beta: {
    foo: "foo",
    bar: "bar",
  }
}

//Now we want to change the value of props.innerAlpha.b to "BBB", but without mutating the original object. 

const props2 = { ...props,
  ...{
    alpha: {
      ...props.alpha,
      ...{
        innerAlpha: {
          ...props.alpha.innerAlpha,
          ...{
            b: "BBB"
          }
        }
      }
    }
  }
};


console.log(props);
console.log(props2);

And it's quite a pain to write code that way, so it's easy to see that someone would do something like:

   const props2 = {...props}; 
   props.alpha.innerAlpha.b = "BBB"; 

So my main question is - are there any proposals to make truly immutable objects in Javascript?

And also - is there a more convenient way to do immutable programming in Javascript?

Answer 1

Aside from Object.freeze and Object.seal, those are excellent ideas. You could also wrap your state in an iif, expose only what you want private, and freeze or seal the rest. React does this. The DCI model also offers a twist on the actor model, where the state is handled at runtime by objects that are enabled or empowered via dynamic mixins. DCI Model And if you are trying to control state and encapsulation at the same time, there are design patterns for that too, GOF as the State Design Pattern and Strategy Pattern. We are not running into problems that the Old Guys have not run into before.