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.

Full Stack Engineer

Menu

ES6 Learning Notes - Built In Objects