What are Tuples and Records in JavaScript?

Immutability is a common term that often pops up when we talk about functional programming. This is because it is one of its core principles. When we talk about immutable objects, we simply mean that once a variable has been declared, its value cannot be changed later on. For example:

const presents = ['๐ŸŽ', '๐Ÿ“ฆ', '๐ŸŽ€', '๐Ÿ’', '๐ŸŽ„'];

// --- Mutable solution ---

// we get back ๐ŸŽ
// and presents will be equal to ['๐Ÿ“ฆ', '๐ŸŽ€', '๐Ÿ’', '๐ŸŽ„'];
presents.shift();

// --- Immutable solution ---

// newPresents will be equal to ๐Ÿ“ฆ ๐ŸŽ€ ๐Ÿ’ ๐ŸŽ„
// and presents will be still equal to ['๐ŸŽ', '๐Ÿ“ฆ', '๐ŸŽ€', '๐Ÿ’', '๐ŸŽ„'];
const newPresents = presents.slice(1);
immutability.js
Copied to clipboard!

The first solution mutates the array, while the second creates a new one and leaves the original intact. In JavaScript, we donโ€™t have real immutable objects, so we either need workarounds to implement safety nets, or worse, we have to trust people that they wonโ€™t change the values.

Now there is a new ECMAScript proposal โ€” currently at stage 2, so implementation can change โ€” that would introduce two new immutable data types: Tuples and Records.

JavaScript Course

Tuples

Both tuples and records have the same syntax. They can be defined by using a # prefix in front of objects and arrays, like so:

// This is a normal array
const arr = [];

// This is a tuple
const tuple = #[];
tuple.js
Copied to clipboard!

When working with tuples, there are some rules you need to be aware of:

For example, operations that mutate the array are replaced with new operations that instead, return a new array. Therefore, eg.: thereโ€™s no push, instead you can use pushed that returns a new tuple with the pushed value, or with to change a value at a given index:

const tuple = #['๐Ÿ„', '๐Ÿ…', '๐Ÿฅ•'];

// Both returns a new tuple
tuple.pushed('๐Ÿฅ’');  // returns #['๐Ÿ„', '๐Ÿ…', '๐Ÿฅ•', '๐Ÿฅ’'];
tuple.with(0, '๐ŸŒณ'); // returns #['๐ŸŒณ', '๐Ÿ…', '๐Ÿฅ•']
tuple.js
Copied to clipboard!

You can also create tuples from existing arrays using Tuple.from():

Tuple.from(['๐Ÿ„', '๐Ÿ…', '๐Ÿฅ•']);

// Likewise, you can turn a tuple into an ordinary array:
Array.from(tuple);
tuple.js
Copied to clipboard!

And of course, they are immutable and will throw an error if you try to change their value or use non-primitives:

const tuples = #['๐Ÿ„', '๐Ÿ…', '๐Ÿฅ•'];

// TypeError: Callback to Tuple.prototype.map may only return primitives, Records or Tuples
tuples.map(tuple => new Button(tuple));
tuple.js
Copied to clipboard!

Records

Just like tuples, records are also denoted by a hash:

// This is a regular object
const obj = { ... };

// This is a record
const record = #{
    tuple: #['๐Ÿ„', '๐Ÿ…', '๐Ÿฅ•'] // Records can also contain tuples
};
record.js
Copied to clipboard!

When working with records, you also need to keep in mind some rules:

To create a new record, you also have the option to use Record, or Record.fromEntries when working with tuples:

const record = Record({
    mushroom: '๐Ÿ„',
    tomato: '๐Ÿ…',
    carrot: '๐Ÿฅ•'
});

// Or
const record = Record.fromEntries(#['๐Ÿ„', '๐Ÿ…', '๐Ÿฅ•']);
record.js
Copied to clipboard!

And since they are new data types, you would get โ€œrecordโ€ back when using the typeof operator:

typeof #{ ... } // returns "record"
typeof #[ ... ] // returns "tuple"
types.js
Copied to clipboard!

Conclusion

Other than the mentioned examples above, you can use both records and tuples in functions or loops just as you normally would with regular objects.

If you want immutability right now, the easiest way is to use Immutable-js. You can also achieve partial immutability with Object.freeze, however, it only freezes immediate children. Therefore, you can still change deeply nested properties:

const obj = Object.freeze({
    a: 1,
    b: {
        c: 2
    }
});

// โœ… Won't work
obj.a = 10;

// โŒ Will be changed to 20
obj.b.c = 20;
freeze.js
Copied to clipboard!

And of course, you can also use it with Babel with the plugin-syntax-record-and-tuple plugin.

Have you already worked with Tuples and Records? Let us know your thoughts about them in the comments below! Thank you for reading through, happy coding!

Remove ads Remove ads

๐Ÿ“š Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. โ˜•

Get access Support us
Remove ads Read more on
Ezoicreport this ad Remove ads
Remove ads
๐ŸŽ‰ Thank you for subscribing to our newsletter. x