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.
All Immutable.js Tutorials in this Series
This is just one tutorial in this in-depth series of Immutable.js tutorials. Here are the others, which all contain a wealth of information and examples (and all in JavaScript!).
Introduction
Lists
- The Foolproof Guide to Creating Lists
- Get, Set and Delete data from an Immutable List
- Merging Lists Finally Explained
Maps
- Every Way to Create an Immutable.js Map
- Get, Set, Delete and Update data from an Immutable Map
- 6 Ways to Merge Maps in Immutable.js