START USING
ES6 TODAY
wesbos.com@wesbosI'm
Wes Bos
![](images/canada-flag.png)
These slides will be available shortly after this talk
I'll tweet the link out.
![](images/Twitter_logo_white.png)
ES6.io
ReactForBeginners.com
SublimeTextBook.com
CommandLinePowerUser.com
flexbox.ioLet's talk about ES6
Life Makers
Features that make life soooo much better
let and const
Some say you should never use `var` again
2 New ways to declare variables
Block Scoped
![](images/screenshots/fgHm.png)
![](images/screenshots/ffxI.png)
![](http://wes.io/hcrq/content.png)
Handy use of let
![](images/screenshots/fh59.png)
![](images/screenshots/fgzX.png)
But...
![](images/screenshots/fgh5.png)
![](images/screenshots/fgnB.png)
what?
Since `age` is globally scoped, by the time we console.log, it's been overwritten!
Solution:
Use let!
![](images/screenshots/fhDp.png)
![](images/screenshots/fgx0.png)
const
block scoped exactly like let
const vars cannot be changed*
*1 sec
On Purpose
![](images/screenshots/fgIK.png)
By Accident
![](images/screenshots/fg1n.png)
Still Block Scoped
const is not immutable!
Allow me to explain
![](images/screenshots/fggs.png)
![](images/screenshots/fgfW.png)
Using const makes sure we can't wipe
- or rebind -
wes out
![](images/screenshots/fgir.png)
![](images/screenshots/fgnM.png)
Template Strings
"Because everyone " + sucks + " at concatenation."
'Single Quotes'
var name = 'Wes Bos';
"Double Quotes"
var puppy = "Snickers";
Introducing `backticks`
const talk = `Start using ES6 today!`;
The Old Way
var name = 'Snickers';
var age = 2;
var sentence = 'My dog ' + name + ' is ' + age * 7 + 'years old.';
The ES6 Way!
![](images/screenshots/fffe.png)
Run JS inside ${}
![](images/screenshots/ffjW.png)
Use an existing Function
![](images/screenshots/ffq2.png)
Handy for HTML
(Hotmail Markup Language)
![](images/screenshots/ffls.png)
![](images/screenshots/ffjT.png)
JavaScript is a templating Language!
Looping
![](images/screenshots/ffsj.png)
![](images/screenshots/fgUE.png)
If
Statements
Use a ternerary operator!
![](images/screenshots/fgCq.png)
Use Render Functions
Just like React!
![](images/screenshots/fgHO.png)
![](images/screenshots/fgLW.png)
![](images/screenshots/fgCZ.png)
![](images/screenshots/ffvp.png)
Default function arguments
![](images/screenshots/fgsY.png)
![](images/screenshots/fgnc.png)
Heating Up!
Let's get a little more advanced
Arrow Functions
ugh, dad.
![](images/screenshots/fgl6.png)
Replace function with =>
![](images/screenshots/fgvC.gif)
Single Argument
Lose the parenthesis
(if you prefer)![](images/screenshots/fgck.gif)
Implicit Return
![](images/screenshots/fh1U.gif)
![](images/screenshots/fgXl.png)
![](images/screenshots/fh6L.png)
![](images/screenshots/fgiQ.png)
this
With Arrow functions, the value of this does not change. this is equal to whatever the parent is bound to.
![](images/screenshots/fgzh.png)
![](images/screenshots/fgfo.gif)
![](images/screenshots/fgmB.gif)
Enhanced Object Literals
Same Name Properties
![](images/screenshots/fgrF.png)
![](images/screenshots/fh01.png)
![](images/screenshots/fgdA.png)
Method Definition
![](images/screenshots/fhAQ.gif)
Tooling
A Quick Overview of what you need to write ES6 Today
Transpiling
Convert ES6 code to ES5
![](images/babel.svg)
Syntax
![](images/screenshots/fh13.png)
New Features
Promises, Sets, Maps...
![](images/screenshots/fhAe.png)
The Un-polyfillables and un-transpileables
Symbols, Proxies, Parts of Subclasses
Deep End 🏊
New concepts for many programmers
destructuring
Put simply, it allows us to create and assign multiple variables in a single line of code. It works with both Objects and Arrays.
![](images/screenshots/fh0F.png)
I need to create three variables called `first`, `city`, and `twitter`. Normally we might do something like this:
![](images/screenshots/fh8u.png)
Create 3 variables in 1 shot
![](images/screenshots/fgbo.png)
![](images/screenshots/fgWF.png)
rename while you destructure
![](images/screenshots/fgmT.png)
Set Default Fallback Values
![](http://wes.io/hnbH/content)
Or Both!
![](http://wes.io/ho0j/content)
...with arrays too!
![](images/screenshots/fgbG.png)
Swap values with destructuring
Old confusing way
![](images/screenshots/fgz3.png)
Swap with Destructuring!
![](images/screenshots/fgbJ.png)
Return Multiple Values from a function
![](images/screenshots/fh2l.png)
![](images/screenshots/fgWl.png)
Pick + Choose
![](images/screenshots/fgyV.png)
Sets
Kind of like the Arrays
you have always wanted
"A Set in ES6 is like a unique array with a nice API for adding/removing/checking its items."
Create a Set
![](images/screenshots/fgYU.png)
Only Unique Data
![](images/screenshots/fgtC.png)
Easy To Delete items without knowing index
![](images/screenshots/fgrg.png)
Nice API for checking if something exists
![](images/screenshots/fgfu.png)
Easy to Loop Over with ES6 `for of`
![](images/screenshots/fgzX2.png)
Any type can be added to a set
![](images/screenshots/fgzk.png)
Holy Smokes!
That was a lot
We're only scratching the surface!
ES7
GET READY
jk only 2 things
![](images/screenshots/fhEM.png)
Lots of time to Learn ES6
But get at it!
Thanks
Folks!
@wesbosWesBos.com