Immutable.js: Creating Sets

A Set is similar to a List at first glance, but has a number of different properties and functions. In this tutorial, we’ll look at how to create a Set, and why you’d use a Set over a List.

Set

Although a Set is similar to a List, its differences make it more suitable for a variety of different problems. Foremost of these is that, unlike a List, a Set is a collection of unique values, and so cannot contain duplicate values. If you attempt to add a duplicate value to an existing Set, it is simply ignored, and no errors are thrown.

Other differences include functions such as union, intersect and subtract, which provide powerful Set manipulation operations that cannot easily (or performantly) be achieved with a List.

Here’s how to use it.

Create an Empty Set

  // Create an empty Set const emptySet = Immutable.Set(); // Output: emptySet;  

Create a Set of data: Set() vs Set.of()

As with all Immutable objects, you can create a Set of data using either the Set() constructor, or the Set.of() method, depending on the type of data you’re using to create the Set. Creating a new Set works very similarly to creating a new List:

• Set.of() – use when creating a Set from non-iterable data (e.g. function arguments, a JavaScript object, or a string you want interpreted as a whole string);
• Set() – use when creating a Set from iterable data (e.g. an array, or an Immutable Iterable object (List, Map, Set, etc.), or a string that you want interpreted as a series of characters).

Important: a JavaScript string is an iterable object, so if you create a Set of strings using Set("string"), you’ll actually get a Set of characters (['s', 't', 'r', 'i', 'n', 'g']). To make Immutable interpret a string as a non-iterable value, use Set.of("string") instead. See examples below.

Create a new Set from…

…a JavaScript array

  // Create a new Set from an array const avengersArray = ['ironMan', 'captainAmerica', 'blackWidow']; const avengersSet = Immutable.Set(avengersArray); // Output: avengersSet;  

…a JavaScript object

An object is not iterable, so we need to use Set.of():

  // Create a new Set from an object const avengers = { ironMan: 'Tony Stark', captainAmerica: 'Steve Rogers', blackWidow: 'Natasha Romanov' }; const avengersSet = Immutable.Set.of(avengers); // Output: avengersSet;  

…just the keys of a JavaScript object

Rather than encoding an entire object as a Set, you can extract just its keys using Set.fromkeys():

  // Create a new Set from an object's keys const avengers = { ironMan: 'Tony Stark', captainAmerica: 'Steve Rogers', blackWidow: 'Natasha Romanov' }; const avengersSet = Immutable.Set.fromKeys(avengers); // Output: avengersSet;  

…a set of function arguments

To create an Immutable Set of values that are passed in as a list of function arguments, use Set.of().

  // Create a new Set of strings const avengersSet = Immutable.Set.of('ironMan', 'captainAmerica', 'blackWidow'); // Output: avengersSet;  

…a JavaScript iterator

Same as with List, any ES6 iterable object, either built-in or user-defined, can be used to create a new Immutable Map.

  // New Set from existing JavaScript iterator (Array.map example) // Note: an ES6 object is not an iterator, so we'll use an array instead const avengersArray = ['ironMan' , 'captainAmerica']; const avengersSet = Immutable.Set(avengersArray.map( (item, index) => ([ 'heroName' + index, item ])) ); // Output: avengersSet;  

…an Immutable List

  // Create a new Set from a List const avengersList = Immutable.List(['ironMan', 'captainAmerica', 'blackWidow']); const avengersSet = Immutable.Set(avengersList); // Output: avengersSet;  

…an Immutable Map

  // Create a new Set from a Map const avengersMap = Immutable.Map({ ironMan: 'Tony Stark', captainAmerica: 'Steve Rogers', blackWidow: 'Natasha Romanov' }); const avengersSet = Immutable.Set(avengersMap); // Output: avengersSet;  

Set operations: Union, Intersect and Subtract

Set provides a range of methods not available to other Immutable objects that can be used to manipulate data in ways that a standard Immutable merge() cannot accomplish.

These include Union, Intersect and Subtract. These operations are covered in the next Immutable.js tutorial on Sets.