A brief overview of some of the latest features available in ECMAScript 6, with examples of how they were written previously in ECMAScript 5, if even possible.
Symbol Type
Symbol Type
Unique and immutable data type to be used as an identifier for object properties. Symbol can have an optional description, but only for debugging purposes.
Support “interable” protocol to allow objects to customize their iteration behaviour. Additionally, support “iterator” protocol to produce sequence of values, either finite or infinite. Finally, provide convenient of-operator to iterate over all values of an iterable object.
ECMAScript 6
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
let fibonacci = { [Symbol.iterator]() { let pre = 0, cur = 1 return { next () { [ pre, cur ] = [ cur, pre + cur ] return { done: false, value: cur } } } } }
for (let n of fibonacci) { if (n > 1000) break console.log(n) }
ECMAScript 5
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
var fibonacci = { next: (function () { var pre = 0, cur = 1; returnfunction () { tmp = pre; pre = cur; cur += tmp; return cur; }; })() };
var n; for (;;) { n = fibonacci.next(); if (n > 1000) break; console.log(n); }
Generators
Generator Function, Iterator Protocol
Support for generators, a special case of iterators containing a generator function, where the control flow can be paused and resumed, in order to produce a sequence of values (either finite or infinite).
ECMAScript 6
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
let fibonacci = { *[Symbol.iterator]() { let pre = 0, cur = 1 for (;;) { [ pre, cur ] = [ cur, pre + cur ] yield cur } } }
for (let n of fibonacci) { if (n > 1000) break console.log(n) }
ECMAScript 5
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
var fibonacci = { next: (function () { var pre = 0, cur = 1; returnfunction () { tmp = pre; pre = cur; cur += tmp; return cur; }; })() };
var n; for (;;) { n = fibonacci.next(); if (n > 1000) break; console.log(n); }
Generator Function, Direct Use
Support for generator functions, a special variant of functions, where the control flow can be paused and resumed in order to produce a sequence of values (either finite or infinite).
ECMAScript 6
1 2 3 4 5 6 7 8 9 10
function* range (start, end, step) { while (start < end) { yield start start += step } }
for (let i ofrange(0, 10, 2)) { console.log(i) // 0, 2, 4, 6, 8 }
ECMAScript 5
1 2 3 4 5 6 7 8 9 10 11 12 13
functionrange (start, end, step) { var list = []; while (start < end) { list.push(start); start += step; } return list; }
var r = range(0, 10, 2); for (var i = 0; i < r.length; i++) { console.log(r[i]); // 0, 2, 4, 6, 8 }
Generator Matching
Generator functions can produce and spread a sequence of values (either finite or infinite).
ECMAScript 6
1 2 3 4 5 6 7 8 9 10 11 12 13
let fibonacci = function* (numbers) { let pre = 0, cur = 1 while (numbers-- > 0) { [ pre, cur ] = [ cur, pre + cur ] yield cur } }
for (let n offibonacci(1000)) console.log(n)
let numbers = [ ...fibonacci(1000) ] let [ n1, n2, n3, ...others ] = fibonacci(1000)
ECMAScript 5
1
// no equivalent in ES5
Generator Control-Flow
Generator functions can support asynchronous programming in the style of “co-routines” in combination with promises.
Cleaner data-structure for common algorithms based on sets.
ECMAScript 6
1 2 3 4 5 6
let s = newSet() s.add("hello").add("goodbye").add("hello") s.size === 3 s.has("hello") === true for (let key of s.values()) // insertion order console.log(key)
ECMAScript 5
1 2 3 4 5 6 7
var s = {}; s["hello"] = true; s["goodbye"] = true; s["hello"] = true; Object.keys(s).length === 2 s["hello"] === true; for (var key in s) // arbitrary order if (s.hasOwnProperty(key)) console.log(s[key]);
Map Data-Structure
Cleaner data-structure for common algorithms based on maps.
ECMAScript 6
1 2 3 4 5 6 7 8
let m = newMap() let s = Symbol() m.set("hello", 42) m.set(s, 34) m.get(s) === 34 m.size === 2 for (let [ key, val ] of m.entries()) console.log(key + " = " + val)
ECMAScript 5
1 2 3 4 5 6 7 8 9 10 11 12
var m = {}; // no equivalent in ES5 m["hello"] = 42; // no equivalent in ES5 // no equivalent in ES5 Objects.keys(m).length === 2; for (key in m) { if (m.hasOwnProperty(key)) { var val = m[key]; console.log(key + " = " + val); } }
Checking whether an integer number is in the safe range, ie: it is correctly represented by JavaScript (where all numbers, including integers, are technically floating point numbers).