ES6 – Working with Collections

Rick HerrmannWant to work with the Nerdia team? Submit your resume.

In addition to adding some features to the Array, two new collection type objects are introduced in ES6: the Set and the Map.

What’s New with Arrays?

The Array object gets several new methods in ES6: find, findIndex, fill, from, and of.  Let’s look at some examples.

find will return the first matching element in an array that passes the predicate test:

let numbers = [1,2,3,4,5,6,7,8,9,10];
let x = numbers.find(x => x > 5);
expect(x).toBe(6);
//Using the arrow function for the predicate makes this a very concise statement.

findIndex works similarly:

let people= ['homer', 'marge', 'bart', 'lisa' 'maggie'];
let x = people.find(x => x === 'bart');
expect(x).toBe(2);

For more complicated queries on a collection I’ll still be using lodash, but find and findIndex will come in handy when I just need a simple query.

Another interesting addition is the from method.  from is useful when you have an “array-like” collection that is not actually an array.  For example, a jquery selector returns a jquery object with a collection of matched elements, but it is not technically an array.  Using Array.from will transform it into an Array.

let arrayLike= $('div');
let actualArray = Array.from(arrayLike);

arrayLike does not have a forEach method, while actualArray does, as well as the other Array methods.

Another way to use use the from method is an alternative to using the map function:

let people = [
    {name:'Homer', age:39},
    {name:'Marge', age:34},
    {name:'Bart', age:10},
    {name:'Lisa', age:8},
    {name:'Maggie', age:2}
];
let names = Array.from(people, (x) => x.name);
expect(names[0]).toBe('Homer');

 

Sets

Set is a new class in ES6.  A Set is an iterable collection of objects that holds unique values.  The important methods on Set are add, has, size, delete, and clear.  Let’s look at some examples using a Set:

let set = new Set();
set.add(1);
expect(set.size).toBe(1);
expect(set.has(1)).toBe(true);

let teams = new Set(['Michigan', 'Ohio State', 'Alabama']);
expect(teams.size).toBe(3);
teams.add('Michigan');  //Michigan is already in the set so it does not get added
expect(teams.size).toBe(3);
teams.delete('Ohio State');
expect(teams.has('Ohio State')).toBe(false);

//objects can be keys
let team1 = {team:'michigan', conference: 'big ten'};
let team2 = {team:'alabama', conference: 'sec'};
let set2 = new Set();
set2.add(team1);
set2.add(team2);
expect(set2.has(team1)).toBe(true);
set2.clear();
expect(set2.size).toBe(0);

//sets can be iterated with forEach or for-of
let set3 = new Set([1,2,3,4]);
set3.forEach(x => console.log(x*x)); //1, 4, 9, 16
for(let x of set3) {
    console.log(x*x); //1,4,9,16
}

 

Maps

Map is similar to the Set but handles storage of key-value pairs instead of just values.  Keys and values can both be primitives or objects.  Items in a Map are guaranteed to be unique based on the key.  Here are some examples:

let map = new Map();
map.set(1, 'Michigan');
map.set(2, 'Michigan State');
expect(map.size).toBe(2);

//adding an item with an existing key replaces the original value
map.set(2, 'Ohio State');
expect(map.get(2)).toBe('Ohio State');

map.delete(1);
expect(map.size).toBe(1);

map.clear();
expect(map.size).toBe(0);

The API for both Sets and Maps is pretty intuitive.  In cases where you know you are dealing with unique data, or need to enforce uniqueness, Maps and Sets are easy to integrate into your code.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s