ES6 history
• ES6 is also known as Harmony
• The correct term however is ES2015 (naming convention
established)
• Was finalised in June 2015
• Future versions will follow the ES[YYYY] pattern
Slide 3
Slide 3 text
ES6 release lifecycle
• Yearly release schedule (yay)
• Features that don’t make the cut take the next train
• This release cycle will pressure browser vendors into
quickly implementing new features
Slide 4
Slide 4 text
So … what is it?
• Simply … next JS version
• An evolution of the language (syntax and functionality)
• Minimises the initial gap for true OOP developers
• Better, faster, more reliable development
Slide 5
Slide 5 text
How to use it?
• Browsers do not fully support ES6 features (though
some are natively implemented)
• You can still write ES6 code though
• Use transpilers in your build process
Slide 6
Slide 6 text
Transpilers
• Transpilers are simply JS-to-JS tools
• They transform your ES6 code (and unsupported
features) to ES5 code
• Some features can’t be exactly transformed (let, const)
so transpilers fall back to old stuff - var
Slide 7
Slide 7 text
Transpilers
• Best transpiler ever: Babel
• It has human-readable output
• Babel also works server-side (for Node)
• Babel has a thriving ecosystem that already supports
some of ES2016 and has plugin support
Slide 8
Slide 8 text
Transpilers
• Use babel to transpile ES6 to ES5 for static builds
• Use babelify with Gulp, Grunt or simple npm run (usually
with browserify for require statements)
• Use babel-node with any version of node, as it transpiles
modules into ES5
Slide 9
Slide 9 text
Install babel
&
configure the build process
Slide 10
Slide 10 text
Let & const
• Better alternatives to the var keyword
• Let and const fix something that was confusing in JS -
they employ block-level scoping
• TDZ (temporal dead zone) - beginning of block, end
where declaration happens
Slide 11
Slide 11 text
Let & const
• Declaration of the same variable (both with let and const)
will fail
• Const variables must be initialized
• Assigning to const after initialization fails (silently or
loudly depending on use strict)
Slide 12
Slide 12 text
Let & const
Slide 13
Slide 13 text
Assignment destructuring
• A shorthand for pulling values out of objects or arrays
• Supports defaults, aliases and nesting
Slide 14
Slide 14 text
Assignment
destructuring
Slide 15
Slide 15 text
Spread operator & rest
parameters
• Used with …
• Rest parameter is a better arguments
• Spread operator helps avoid apply, or casts array-like
collections to arrays (list of DOM nodes to array)
Slide 16
Slide 16 text
Spread operator &
rest parameters
Slide 17
Slide 17 text
Arrow functions
• Terse way to declare functions
• Depending on how you specify them, you might have
implicit return
• You can’t name them
• Arrow functions are bound to their lexical scope (actually
they don’t define a this, arguments, etc.)
Slide 18
Slide 18 text
Arrow functions
Slide 19
Slide 19 text
Template literals
• Declared using ` (backtick) in addition to “, ‘
• They can be multiline
• They allow interpolation of variables or valid JS
expressions
Slide 20
Slide 20 text
Template literals
Slide 21
Slide 21 text
Object literals
• Objects now have property value shorthand
• You can also have computed property names
• Method definitions in object literals also have an
improved, more terse syntax
Slide 22
Slide 22 text
Object literals
Slide 23
Slide 23 text
Classes
• Syntactic sugar on top of old prototypes
• Supports inheritance (via extend keyword), constructors,
super calls, static methods
• They still rely on prototype inheritance (this is different
than traditional OOP languages)
Slide 24
Slide 24 text
Classes
Slide 25
Slide 25 text
Symbols
• A new primitive type in ES6 (an awful lot like strings)
• Symbols are immutable and unique
• They have the type symbol
Slide 26
Slide 26 text
Symbols
• Symbols are not iterable (some exceptions - Symbol.
iterator)
• Can be as global as you want (cross-realm)
• There are built-in symbols - Symbol.iterator, Symbol.
match
• Use them for name clashes (objects as hash maps) or for
defining protocols (eg: iterator)
Slide 27
Slide 27 text
Symbols
Slide 28
Slide 28 text
Iterators
• Iterators and the iterable protocol define how to iterate
over any object
• Uses the Symbol.iterator built-in symbol
• Must return an object that has a next method (with value
and done)
Slide 29
Slide 29 text
Iterators
• Object that have implemented the iterable protocol are
iterable (you can use the for … of, spread operator, etc.)
• Some built-ins are iterable by default (Arrays, Strings,
arguments, NodeList, etc.)
• Iterators are lazy (one item at a time)
Slide 30
Slide 30 text
Iterators
Slide 31
Slide 31 text
Generators
• Generators are a special kind of iterator
• Make use of the yield keyword
• Generator function execution is suspended,
remembering the last position
• Useful to make async flows feel synchronous
Slide 32
Slide 32 text
Generators
Slide 33
Slide 33 text
Promises
• A way to deal with async code (in a sync-like manner)
• Created by using the Promise “class” (will either be
resolved or rejected)
• Promises are chainable (then or catch - return new
promises)
Slide 34
Slide 34 text
Promises
• Start out in pending state and are settled at a later time
(resolved or rejected)
• Promises can be settled only once
• Only one of the then or catch branch (and sub-branches)
will be executed
• There is Promise.all and Promise.race
Slide 35
Slide 35 text
Promises
Slide 36
Slide 36 text
Maps
• A replacement to the common pattern of creating a
hash-map using POJOs
• Adheres to the iterable protocol
• Keys can be arbitrary values (eg: DOM nodes, strings,
functions, etc.)
• Methods to get, set or check values
Slide 37
Slide 37 text
Maps
Slide 38
Slide 38 text
WeakMaps
• A subset of Map with limited functionality
• It’s not iterable
• Keys must be objects (does not support primitive types
as keys)
Slide 39
Slide 39 text
WeakMaps
• WeakMap holds references to its keys weakly, meaning
that if there are no other references to one of its keys,
the object is subject to garbage collection
• Use it when you need to specify object metadata or
extend an object while still being able to garbage collect
it if nobody else cares about it
Slide 40
Slide 40 text
WeakMaps
Slide 41
Slide 41 text
Sets
• Quite similar to Map (iterable, same methods)
• Sets don’t have keys, only values (the key is the value)
• Sets can’t have duplicate values because the values are
also used as keys
Slide 42
Slide 42 text
Sets
Slide 43
Slide 43 text
WeakSets
• Quite similar to WeakMap
• Has only values (they act as keys also)
• Not iterable, works only with objects
Slide 44
Slide 44 text
WeakSets
Slide 45
Slide 45 text
Proxies
• Used to augument behaviour of objects through traps
(proxies act as a passthrough)
• Your defined handlers determine the access rules to the
underlying object
• Can be revocable
• A lot of traps: get, set, has, defineProperty, apply,
ownKeys, etc.
Slide 46
Slide 46 text
Proxies
Slide 47
Slide 47 text
Numbers
• Some cool additions were made to the Number class
• Methods like isInteger, isSafeInteger or constants such
as EPSILON, MAX_SAFE_INTEGER,
MIN_SAFE_INTEGER, etc.
Slide 48
Slide 48 text
Numbers
Slide 49
Slide 49 text
Math
• Some cool additions were made to the Math class
• Methods like sine, trunc, cbrt, sinh, cosh, asinh, hypot,
fround, etc.
Slide 50
Slide 50 text
Math
Slide 51
Slide 51 text
Arrays
• Some cool additions were made to the Array class
• Methods like Array.from, Array.of, copyWithin, fill, find,
findIndex, etc.
Slide 52
Slide 52 text
Arrays
Slide 53
Slide 53 text
Objects
• Some cool additions were made to the Object class
• Methods like assign, is, getOwnPropertySymbols,
setPrototypeOf, and object literals
Slide 54
Slide 54 text
Objects
Slide 55
Slide 55 text
Strings
• Some cool additions were made to the String class
• Methods like startsWith, endsWith, repeat, include,
codePointAt, fromCodePoint, etc.
Slide 56
Slide 56 text
Strings
Slide 57
Slide 57 text
Modules
• ES6 modules are files that export an API
• You can export named or default bindings
• You can export a list (multiple bindings)
Slide 58
Slide 58 text
Modules
• Import is done in CommonJS style (using the import
keyword)
• You can alias imports, import everything within a
module, etc.
Slide 59
Slide 59 text
Modules
Slide 60
Slide 60 text
That’s all folks!
• ES6 (ES2015) is here to stay and evolve
• Embrace it today (production as well)
Slide 61
Slide 61 text
Thanks!
Vlad “Reign” Zelinschi
(UI Tech Lead at 3Pillar Global)
@r31gN_