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; myArray.push(42); 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 } } Object.freeze(myObj); 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; b.push(3); 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.
