Posted on May 31, 2020

Record and Tuples - New Datatypes in JavaScript

Record (Analogous to objects) and Tuple (Analogous to arrays) are the new types that are coming soon in JavaScript. At the time of writing, they are in Stage 1.

Syntax
Notice the # before curly braces or square bracket. This is the Syntactical difference between objects/arrays and records/tuples.

const record = #{ foo: "FOO", bar: "BAR" }; const tuple = #["FOO", "BAR"]

Deep Immautablity
Record and Tuple are deeply immutable, unlike Object.freeze. The value of a record/tuple or the values inside nested record/tuples cannot be changed once it is defined.

const record = #{ foo: "FOO", bar: "BAR", foobar: #["FOO", "BAR"] }; const tuple = #["FOO", "BAR", #{foo: "FOO", bar: "BAR"}] record.foo = "BAR" // Error record.foobar[0] = "BAR" // Error tuple[0] = "BAR" // Error tuple[2].foo = "BAR" // Error

Deep Equality
IMO this is the best feature of record/tuple. In objects and arrays, you can only compare by their reference but in a record or a tuple, you can compare by its values. It is also possible to compare values of nested record/tuple

const record2 = #{foo: "FOO", bar: "BAR", foobar: #["FOO", "BAR"]} const tuple2 = #["FOO", "BAR", #{foo: "FOO", bar: "BAR"}] record.foobar === #["FOO", "BAR"] // true tuple[2] === #{foo: "FOO", bar: "BAR"} // true record === record2 // true tuple === tuple2 // true

Features same as Object/Array
You can use them just like you use objects and arrays.
Computed property names, shorthand notation, spread operator, Destructuring, rest operator.

const f = "foo" const bar = "BAR" const values = #{a: 1, b: 2} const record = #{ [f]: "FOO", // Computed property names bar, // Short hand notation ...values // Spread operator }; console.log(record.foo == "FOO") // true console.log(record.bar == "BAR") // true console.log(record.a == 1) // true console.log(record.b == 2) // true const { foo: destructedFOO, ...rest } = record // Destructuring and rest operator console.log(destructedFOO == "FOO") // true console.log(rest.a == 1) // true console.log(rest.b == 2) // true console.log(rest.bar == "BAR") // true

Limitations
Cannot use Record and Tuples on lhs while destructuring, symbol key not supported in the record, the nested Object/Array/Class can not be converted to record.

// Using a record or tuple literal on the lhs is a SyntaxError const #{ a, b } = #{ a: 1, b: 2 } // SyntaxError const #[a, b] = #[1, 2] // SyntaxError // Record and Tuples only support primitive data types  const record = #{ instance: new SomeClass()} //Error const record = #{ object: { a: 1}} //Error const tuples = #[new SomeClass()] // Error const tuples = #[1, [2]] // Error // Records can only have String keys, not Symbol keys const record = #{ [Symbol()]: #{} }; //Error