ESNext: Immutable Datastructures in JavaScript with Records & Tuples

A new ECMAScript Proposal that I’m looking forward to is this one which introduces the Record and Tuple value types. In short:

  • Records are immutable Objects that are compared by value.
  • Tuples are immutable Arrays that are compared by value.

The proposal is currently Stage-1.

💁‍♂️ Stage-1?

The Technical Committee which is concerned with the standardization of ECMAScript (i.e. TC39) has a 5 stage process in place, ranging from stage-0 to stage-4, by which it develops a new language feature.

Stage-1 is the Proposal stage. It signals that the committee is showing interest in the proposal and that it is seeking further investigation on how to tackle it. At this stage the proposal is subject to heavy changes. It is only when a proposal reaches Stage 4 that it is ready to become part of the ECMAScript Specification.

Update 2020.07.22: the proposal has now advanced to Stage-2!

As it stands right now, definition of Records/Tuples goes – quite obviously – the same way you define Objects/Arrays. The only difference is that you need to prefix the # operator to them.

// Records
const record1 = #{
    a: 1,
    b: 2,
    c: 3,
};

const record2 = #{...record1, b: 5}; // #{ a: 1, c: 3, b: 5 }

// Tuples
const tuple1 = #[1, 2, 3];
const tuple2 = tuple1.with(0, 2); // #[2, 2, 3]

Knowing that # is already used for Private Fields, and that the proposal still is Stage-1, I can see the operator get replaced as the proposal progresses over time. Personally I’m thinking to use the $ modifier/prefix.

ECMAScript proposal for the Record and Tuple value types →
Record & Tuple Polyfill →

💡 Looking for more ESNext Proposals that excite me? Check out ESNext: Proposals to look forward to, a talk I’ve given on that subject.

Did this help you out? Like what you see?
Thank me with a coffee.

I don\'t do this for profit but a small one-time donation would surely put a smile on my face. Thanks!

BuymeaCoffee (€3)

To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Join the Conversation

4 Comments

  1. Great 🙂
    There is one thing though. I’m not sure about the naming.
    I know that calling them simply by “immutable array” and “immutable object” is boring, and it’s long, but it’s easier to remember and learn. It’s a descriptive modifier before an already known concept. On the other hand Record and Touple are two completely new terminology, and can be scary for the beginners.
    There is one more thing: Record is an already existing data type of Typescript.

Leave a comment

Leave a Reply to Sébastien Lorber Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.