Future Javascript: Records and Tuples
Tags: javascript, webdev, news, tutorial
Published: 2022-02-21 10:05:29

Records and Tuples are an upcoming feature for Javascript, which may be familiar if you have used other languages. They are very similar to `Array`s and `Object`s, the key difference being that they are immutable, meaning they can't be updated or changed. They give us a brand new primitive type in Javascript, and let us do a lot of things we couldn't previously do, including comparing objects and arrays by value, rather than identity. In this article, we'll cover how they work, and how you can use them today.

## Support for Records and Tuples
Currently, records and tuples are a stage 2 proposal for Javascript. Broadly speaking, this means that they are relatively stable, but not implemented as a standard spec. As such, major browsers and backend Javascript like Node.JS do not implement them. You can, however, use them, if you have Babel, [by using this polyfill](https://babeljs.io/docs/en/babel-plugin-proposal-record-and-tuple#docsNav).

## What are Records and Tuples in Javascript?
`Record`s and `Tuple`s introduce a brand new primitive type to Javascript, but ultimately follow the same syntax as Objects and Arrays. When we want to define a new `Record` or `Tuple`, we use the syntax `#{}` or `#[]`. As such, we can define both as shown in the code below:

```javascript
let myRecord = #{
    name: "New Record",
    tags: #['some', 'tags', 'go', 'here']
}

let myTuple = #['some', 'other', 'set', 'of', 'array', 'items'];
```
As you can see, the syntax is identical to objects and arrays, with the exception of the hash (`#`) at the start. Note, that we can also put a `Tuple` in our `Record`, as shown in the first example.

## Records and Tuples are immutable
Both `Record`s and `Tuple`s in Javascript are deeply immutable. All that means is that they can't be changed, at any level. If you try to change them, you'll get an error:
```javascript
let myRecord = #{
    name: "New Record",
    tags: #['some', 'tags', 'go', 'here']
}

myRecord.name = 'Another Record'; // This will throw an error
```

That also means you can't insert something new into them. In that way, they act as a source of truth - which brings us onto their main use case. Both Tuples and Records allow us to compare Objects and Arrays based on their value, rather than their identity.

## Records and Tuples compare Values, not Identity
If you try to run the following code, you'll get false back:

```javascript
console.log({ a: 1 } === { a: 1 }) // returns false
console.log([1, 2, 3] === [1, 2, 3]) // returns false
```
That might be confusing, but it's because equality of Objects and Arrays work on the basis of identity. When we define a new Object or Array, it is given a unique identity. As such, when comparing the identity of two different Objects, the result is false.

`Record`s and `Tuple`s break that convention, and allow us to compare by value. Deep comparisons of objects has been something that's been quite tricky in Javascript for a long time, but with Tuples and Records we can finally do that. As such, the following code returns true:

```javascript
console.log(#{ a: { b : 3 }} === #{ a: { b : 3 }}) // return true
console.log(#[1, 2, 3] === #[1, 2, 3]) // returns true
```

This means we can finally (and easily) make comparisons of the value between different objects, where we expect a very specific return value.

## Converting Arrays to Tuples and Objects to Records in Javascript
Since Records and Tuples are compared by value, you may want to convert regular Objects and Arrays into them, so that you can make that comparison. Fortunately, we can convert any Object or Array into a Record or Tuple using `Record()` and `Tuple()`:
```javascript
let newRecord = Record({ a: 1, b: 2 });
let newTuple = Tuple(...[1, 2, 3, 4, 5]);
let anotherTuple = Tuple.from([1, 2, 3, 4, 5]);
```
Both the above lines will produce the Record and Tuple version of each. Future proposals also include a JSON.parseImmutable function, which will let us convert strings of Arrays or Objects straight into their Tuple or Record form. This is not currently implemented.

## Adding to a Tuple or Record
I am aware that I have just said that you can't add to or change a Tuple/Record - but you can produce a new Tuple or Record based on an old one. This will be a totally different Tuple/Record - but it will use the data from the old and add something new. We can do that as shown below:

```javascript
let myTuple = #[1, 2, 3, 4, 5];
let myRecord = #{ a: 1, b: 1 };

// Produce a new record using original myRecord:
let newRecord = #{ ...myRecord, c: 1 } // #{ a: 1, b: 1, c: 1}
// Produce a new tuple using myTuple:
let newTuple = #[ ...myTuple, 6, 7];
// Or you can use Tuple.with():
let anotherTuple = myTuple.with(6, 7);
```

## Interacting with Tuples and Records in Javascript
`Tuple`s and `Record`s work exactly the same as Objects and Arrays except they cannot be changed. As such, you can iterate through them, or interact with them using the same methods as are available on `Object`s and `Array`s. For example, we could get all the keys of a particular Record:

```javascript
let myRecord = #{ a: 1, b: 2, c: 2};
let recordKeys = Object.keys(myRecord); // Returns ['a', 'b', 'c'];
```
Or you could iterate over an array using a for loop:

```javascript
let myTuple = #[1, 2, 3, 4, 5];
for(const i of myTuple) {
    console.log(i);
}

// Console logs 1, 2, 3, 4, 5 on after each other
```

## Conclusion
As Tuples and Records aren't widely supported, you will need the Babel polyfill to use them. They allow us to compare data from Objects and Arrays in ways we couldn't before, making code much simpler where it once required complicated custom functions. To read the full proposal, [click here](https://github.com/tc39/proposal-record-tuple).