JavaScript's New Immutable Data Types: Records and Tuples

Records and tuples are new JavaScript immutable data types currently at stage 2 in the TC39 standards approval process. They are subject to change and not currently available in any browser or runtime, but working implementations should arrive within the next year. They help solve a couple of confusing conundrums faced by coders …

Constant Changes

Professional JavaScripters will tell you that assigning variables with const is best practice where possible. It makes variables immutable. Values can’t be changed, so you have fewer issues to deal with.

Unfortunately, const only makes primitive values immutable (String, Number, BigInt, Boolean, Symbol, and undefined). You can’t reassign an array or an object, but the values and properties they contain can be modified. For example:

// array constant
const myArray = [1, 2, 3];

// change array values
myArray[0] = 99;

console.log(myArray); // [ 99, 2, 3, 42 ]

myArray = 'change'; // ERROR!

Similarly for objects:

// object constant
const myObj =  a: 1, b: 2, c: 3 

// change object properties
myObj.a = 99;
myObj.d = 42;

console.log(myObj); //  a:99 ,b:2, ,c:3, ,d:42 

myObj = 'change'; // ERROR!

The Object.freeze() method can help, but only shallow freezing is applied to the immediate child properties of an object:

const myObj =  a: 1, b: 2, c:  v: 3  

myObj.a = 99; // silently ignored
myObj.c.v = 99; // works fine

console.log(myObj); //  a: 1, b: 2, c:  v: 99  

It’s therefore difficult to guarantee a function won’t intentionally or accidentally change the values held in an array or object. Developers must either hope for the best or pass a cloned version of a variable — (which has its own challenges).

Equivalent Inequality

Further chaos can ensue when developers attempt seemingly reasonable object or array comparisons:

const str = 'my string';
console.log( str === 'mystring' );  // true

const num = 123;
console.log( num === 123 );         // true

const arr = [1, 2, 3];
console.log( arr === [1, 2, 3] );   // false

const obj =  a: 1 ;
console.log( obj ===  a: 1  );    // false

Only primitive types can be compared by value. Objects and arrays are passed and compared by reference. Two variables will only be equivalent when they point to the same item in memory:

const a = [1, 2];

const b = a;

console.log( a === b ); // true

// original array has changed
console.log( a ); // [1, 2, 3]

Deeply comparing two objects or arrays requires a recursive comparison function to assess each value in turn. Even then, you may encounter issues with types such as dates or functions which could be stored in different ways.

Continue reading
JavaScript’s New Immutable Data Types: Records and Tuples
on SitePoint.