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
Top comments (3)
Nice intro ;)
For those interested, I've written a very detailed article on how I'd use these in a React codebase, and what kind of problems they would solve:
Records & Tuples for React
Good read
Deep equality 😲😲!!
If only we could destructure them...