Record & Tuple: Immutable Data Structures in JS

Rate this content
Bookmark

Record & Tuple is a proposed feature for JavaScript that aims to introduce new immutable value types. Records are immutable key/value structures and Tuples are immutable sequences of data. In this talk, Robin, one of the champions of the proposal will introduce the feature, show how it can be used and explain how this feature is advancing in the TC39 standardization process.

Robin Ricard
Robin Ricard
24 min
16 Jun, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Today's Talk introduces the concept of record and tuple in JavaScript, which provide a new way to handle data. The Talk explores the references and mutability of objects, strings, and numbers in JavaScript. It discusses the limitations of freezing objects and proposes record and tuple as a solution. The Talk also covers methods and syntax for tuples, the status of the proposal, and acknowledges the contributions of various individuals. Overall, the Talk aims to redefine how data is handled in JavaScript and encourages waiting for broader browser support before implementing these features.

1. Introduction to Record and Tuple in JavaScript

Short description:

Today, we're going to talk about record and tuple, a new feature in JavaScript that will redefine the way you handle data. We'll cover objects, strings, and numbers, and discuss their references and mutability. Let's start with strings.

And join us at the React Jam. Here are a few of the things you'll find out. Thanks. So let's begin.

So thank you for coming. I'm Robin. Today, we're going to talk about record and tuple, and this is about new feature in JavaScript that we're coming to you with on the next event. And we're going to look at how we can improve it. And this is about new feature in JavaScript that hopefully you'll be able to use, I guess, soon. And it's hopefully going to redefine the way you handle data in JavaScript.

So again, I'm Robin. I work at Bloomberg. I do JavaScript infrastructure, and so I work with thousands of developers in my company to improve their JavaScript experience. I'm also TC39 delegate for Bloomberg. That means that I get to participate in the standardization process of the JavaScript language. And also I'm one of the coauthors and cochampions of Record and Tuple. That's a good thing because today we're going to talk about them.

Okay. What are we going to cover today? First, we're not going to talk about Record and Tuple, but the objects and the types you know and love in JavaScript today. Then we're going to look at Record and Tuple. And finally I'm going to tell you when and if you can use them. Okay.

So, let's start with objects. You already used them and we're also going to talk about other types. Such as strings, numbers. Very basic stuff but nevertheless, it's important to take some time to look at them. We're also going to talk about how they're being referenced and how they're mutable in some ways. Let's start with primitives. And in this case we have strings. On the first line, we create a string.

2. Understanding JavaScript References and Mutability

Short description:

In JavaScript, primitive values like strings and numbers are compared based on their exact characters. Objects, on the other hand, are compared based on their references in memory. Changing a character in a string or mutating the internals of an object is possible, but objects can be frozen to make them immutable. However, freezing is non-recursive, so arrays inside objects can still be mutated. This can be useful when adding or modifying keys in an object. Mutating things can be tricky, so let's explore an example using the initConnections function from a library.

On the second line, we create a second string. Or do we create a new one or is it the same string? That's the question. For JavaScript when you put a primitive value in a variable and you basically use that variable somewhere else and compare it, if the value inside matches exactly the same characters, in the case of a string, it's going to tell you this is the same value.

The same thing goes for numbers. For objects, on the first line here, I'm creating an object. On the second line, I'm creating a second object. Whether they have the same internal stuff in them is irrelevant here. At every line, I create a new reference to a new object and essentially we're going to point to another place in the memory. So we have two references to two different places. For JavaScript, those are not the same thing, they're completely unequal and they're not going to match.

So I don't know if you tried to change one character in string. But if you try to do it, at least in strict mode, this is not going to work out. You're going to have an exception and you're not going to be able to mutate the internals of the string. But I'm pretty sure you already done that with objects and changed the internals of an object by just setting something at a specific key. So here I'm just changing the name key and everything goes well. But some of you might know that you can freeze objects. That makes them basically immutable. So why would we need record intubal? We'll get to that later. But yeah, I can freeze my object and now I can change keys. So that's it. Just done. Mission accomplished. Except that it's non-recursive. So if I want to actually mutate the array inside of that object, I can. Actually that's a good thing here because I wanted to add my colleague Ashley to the champion group because he's been participating a lot on making record intubal amazing.

Okay. So before we go further, some of you might know that mutating things sometimes is a sleep free slope. And so if you know that this is a problem, this next part is going to be, yeah, duh. But it's still an interesting example here that I want to show you. So here, let's say I get this initConnections function from a library.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Scaling Up with Remix and Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
Making JavaScript on WebAssembly Fast
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
Webpack in 5 Years?
JSNation 2022JSNation 2022
26 min
Webpack in 5 Years?
Top Content
What can we learn from the last 10 years for the next 5 years? Is there a future for Webpack? What do we need to do now?
Towards a Standard Library for JavaScript Runtimes
Node Congress 2022Node Congress 2022
34 min
Towards a Standard Library for JavaScript Runtimes
Top Content
You can check the slides for James' talk here.

Workshops on related topic

Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
WorkshopFree
Hussien Khayoon
Kahvi Patel
2 authors
Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want?
In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.
Testing Web Applications Using Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
WorkshopFree
Gleb Bahmutov
Gleb Bahmutov
This workshop will teach you the basics of writing useful end-to-end tests using Cypress Test Runner.
We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data.
Anyone who knows JavaScript programming language and has NPM installed would be able to follow along.
Build a powerful DataGrid in few hours with Ag Grid
React Summit US 2023React Summit US 2023
96 min
Build a powerful DataGrid in few hours with Ag Grid
WorkshopFree
Mike Ryan
Mike Ryan
Does your React app need to efficiently display lots (and lots) of data in a grid? Do your users want to be able to search, sort, filter, and edit data? AG Grid is the best JavaScript grid in the world and is packed with features, highly performant, and extensible. In this workshop, you’ll learn how to get started with AG Grid, how we can enable sorting and filtering of data in the grid, cell rendering, and more. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid into your React application.
We all know that rolling our own grid solution is not easy, and let's be honest, is not something that we should be working on. We are focused on building a product and driving forward innovation. In this workshop, you'll see just how easy it is to get started with AG Grid.
Prerequisites: Basic React and JavaScript
Workshop level: Beginner
0 to Auth in an Hour Using NodeJS SDK
Node Congress 2023Node Congress 2023
63 min
0 to Auth in an Hour Using NodeJS SDK
WorkshopFree
Asaf Shen
Asaf Shen
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.JS backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.
Table of contents- A quick intro to core authentication concepts- Coding- Why passwordless matters
Prerequisites- IDE for your choice- Node 18 or higher
Build a Powerful Datagrid With AG Grid
React Summit 2024React Summit 2024
168 min
Build a Powerful Datagrid With AG Grid
WorkshopFree
Brian Love
Brian Love
Does your React app need to efficiently display lots (and lots) of data in a grid? Do your users want to be able to search, sort, filter, and edit data? AG Grid is the best JavaScript grid in the world and is packed with features, highly performant, and extensible. In this workshop, you’ll learn how to get started with AG Grid, how we can enable sorting and filtering of data in the grid, cell rendering, and more. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid into your React application.
JavaScript-based full-text search with Orama everywhere
Node Congress 2023Node Congress 2023
49 min
JavaScript-based full-text search with Orama everywhere
Workshop
Michele Riva
Michele Riva
In this workshop, we will see how to adopt Orama, a powerful full-text search engine written entirely in JavaScript, to make search available wherever JavaScript runs. We will learn when, how, and why deploying it on a serverless function could be a great idea, and when it would be better to keep it directly on the browser. Forget APIs, complex configurations, etc: Orama will make it easy to integrate search on projects of any scale.