/ ES6

ES6 Learning Notes - Built In Objects

New Array Changes

ES6 has added several new functions to Array instances.

find

Find the first member whose value is greater than 8:

var ary = [1, 5, 10];
var match = ary.find(item => item > 8);
match; // 10

findIndex

Returns the index of the first match:

var ary = [1, 5, 10];
var match = ary.findIndex(item => item > 3);
match; // 1

fill

The fill function will fill the entire array with what you supply:

var ary = [1, 2, 3, 4, 5];
ary.fill('a');
ary; // ['a', 'a', 'a', 'a', 'a']

You can also supply a start and end index to the call:

ary.fill('a', 2, 3) // would change only index 2 to 'a'

copyWithin

Copies portions of existing array on top itself in a different location.

var ary = [1, 2, 3, 4]; // we want [1, 2, 1, 2]

// First parameter as the target (index 2)
// Second parameter is where you copy from (index 0)
// A third parameter would be the stopping point.
ary.copyWithin(2, 0); // [1, 2, 1, 2]
ary.copyWithin(2, 0, 1); // [1, 2, 1, 4]
ary.copyWithin(2, 0, 2); // [1, 2, 1, 2]

// Can also use negative indexes:
ary.copyWithin(0, -2); // [3, 4, 3, 4]

of

This is a way to create an array:

var ary = new Array(3); //[, , ]
var ofAry = Array.of(3); // [3]

ary.length; // 3
ofAry.length; // 1

from

Creates an array when given an array-like object.
Example grabbing all divs in an HTML document:

var arrayLike = document.querySelectorAll('div');
// arrayLike.forEach is undefined

var fromArray = Array.from(arrayLike);

entries and keys

Returns entries from the entries function

var a = ['Joe', 'Jim', 'John'];
var entries = a.entries();

var firstEntry = entries.next().value;
firstEntry[0]; // 0 (the index)
firstEntry[1]; // 'Joe' (the value)

// `keys` are the indexes
var firstKey = keys.next().value;
firstKey; // 0

Array Comprehensions

Create a list based on an original list. This is easier to read than map.

var ary = [for (i of [1, 2, 3]) i]; // [1, 2, 3]

var ary2 = [for (i of [1, 2, 3]) i * i]; // [1, 4, 9]

var ary3 = [for (i of [1, 2, 3]) if (i < 3 ) i]; // [1, 2]

// Cartesian product:
var ary4 = [for (first of ['William', 'John', 'Blake'])
            for (middle of ['Robert', 'Andrew', 'John'])
            if(first != middle) (first + ' ' + middle + ' Smith')]

ary4; // ["William Robert Smith", "William Andrew Smith" ...]

Set

Sets are a new ES6 object that are unique lists.

var set = new Set();

set.size; // 0

set.add("somevalue");
set.size; // 1

Sets convert everything using the toString. Sets can be initialized with an Array:

var set = new Set([1, 2, 3]);
set.has(1); //true

set.clear(); will empty the set.

set.delete(item); will delete the item:

var set = new Set();
set.add(1);
set.add(2);
set.delete(1);
set.size; // 1

Sets can be iterated with a forEach, and will be iterated in insertion order. However, if order is really important, use an Array. for of can also be used:

var set = new Set();
set.add(['Tom']);
set.add(['Dick']);
set.add(['Harry']);

var iterCount = 0;
set.forEach(item => iterationCount++);
iterationCount; // 3

var set = new Set([1, 2, 3]);
for (var item of set) {
  iterationCount++;
}
iterationCount; // 3

Maps

Maps are collections of key-value pairs.

var map = new Map();

map.set("age", 35);
map.size; // 1
map.get("age"); // 35


var ageMap = new Map();
var ralph = {'name': 'Ralph'};
ageMap.set(ralph, 29);
ageMap.get(ralph); // 29


vap map = new Map([['name', 'John'], ['age', 15], ['weight', 155]]);
map.size; // 3
map.has('age'); // true

// Maps do not allow duplicate keys:
var map = new Map();
var key = {};
map.set(key, 'first');
map.set(key, 'second');
map.get(key); // 'second'

Maps have clear and delete like Sets.

Iterate Maps:

vap map = new Map([['name', 'John'], ['age', 15], ['weight', 155]]);
var iterationCount = 0;

map.forEach(function(value, key) {
  iterationCount++;
  // use value & key
});

// Now with `for of`
for(var [key, value] of map) {
  // the key and the value are their own variables
  iterationCount++;
}

Maps return an iterator of arrays of key-value pairs when entries is called:

  var map = new Map();
  map.set('name', 'Joe');
  var items = map.entries();
  var first = items.next().value;
  first[0]; // 'name'
  first[1]; // 'Joe'

An iterator of values is returned when calling values, and iterator of keys when calling keys:

 var map = new Map();
 map.set(1, 'a');
 var values = map.values();
 var first = values.next().value;
 first; // 'a'

 var keys = map.keys();
 var firstKey = keys.next().value;
 firstKey; // 1 

Maps can be constructed with an iterator.

WeakMap & WeakSet

In a normal Map and Set, pointers to objects are strong. If the object being pointed to is deleted, the Map/Set retains its pointer so the object can't be garbage collected. This is a problem for DOM nodes for example.

Because the garbage collector can happen at any time (and thus could remove items from a WeakSet at any time), all the functionality that deals with sets as a whole has been removed from the WeakSet.

For example, there is no size property, forEach, etc.

Other than that, they function the same: has, delete, clear, etc.

WeakMaps are like WeakSets, but we can do has, get, delete, clear, etc.

Since you can't check if a WeakMap or WeakSet are empty, you can just check if a specific member is gone.

Seth Bergman

Seth Bergman

I'm a Software Engineer focused on helping companies scale. I love learning about software architecture, containers, open source programming and automation.

Read More