Essentials and Impactful Features of ES6

JavaScript is the
implementation of ES standard.

1997 1998 1999 2009 2015 2016 2017
ES1 ES2 ES3 ES8 ESNextES5 ES6 ES7
ES2015 ES2016 ES2017

ES6
Variable Declaration
Object Literals
Arrow Functions
Assignment  
Destructuring
Rest and 
Spread Operator
Template 
Literals
async/await
Class

let — var with different scope rules.

{{{{{ var deep = 'This is available from outer scope.';}}}}}
console.log(deep);
!// This is available from outer scope.
ES5

{{{{{ let deep = 'This is available from outer scope.';}}}}}
console.log(deep);
!// ReferenceError: deep is not defined.
ES6

for (let i = 0; i < 2; i!++) {
console.log(i);
}
console.log(i);
!// 0, 1
!// ReferenceError: i is not defined
ES6

for (var i = 0; i < 2; i!++) {
console.log(i);
}
console.log(i);
!// 0, 1
!// 2
ES5

const — assignment only at declaration time.

const pi = 3.1415;
pi = 6;!// TypeError: Assignment to constant variable
ES6

Object Literal — key-value, powerful
data structure.

const book = {
title: 'Start With Why',
author: 'Simon Sinek',
publisher: 'Amazon'
};

let listeners = [];
function listen() {}
const podcast = {
listeners: listeners,
listen: listen
};
ES5

let listeners = [];
function listen() {}
const podcast = {
listeners,
listen
};
ES6

let emitter = {
events: {},
on(type, fn) {
this.events[type] = [];
}
this.events[type].push(fn);
},
emit(type, event) {
return;
}
this.events[type].forEach(function(fn) {
fn(event);
});
}
};
ES6

Arrow functions — another way of writing anonymous
functions.

function name(params) {
!// function body
}
ES5

const name = function (params) {
!// function body
}
ES5

const name = (params) => {
!// function body
}
ES6

Arrow functions — bound to their lexical scope, which is
the reason why they don’t alter the meaning of this.

const box = document.querySelector('.box');
box.addEventListener('click', () => {
console.log(this); !// window
});
ES6

box.addEventListener('click', function() {
console.log(this); !// <div class="box" …>
});
ES5

setTimeout(function() {
}, 1000);
});
ES5

window.setTimeout(function() {
}, 1000);
});
ES5

const that = this;
window.setTimeout(function() {
console.log(that); !// <div class="box" …>
}, 1000);
});
ES5

window.setTimeout(() => {
console.log(this); !// <div class="box" …>
}, 1000);
});
ES6ES5

Destructuring — Binds properties to as many variables as
you need. It works with objects, arrays, and even in
function parameter lists.

const character = {
name: 'Bruce',
pseudonym: 'Batman',
metadata: {
age: 34,
gender: 'male',
},
superpower: ['rich', 'sugardaddy'],
};
const pseudonym = character.pseudonym;
const name = character.name;
const superpower = character.superpower;
ES5

const character = {
name: 'Bruce',
metadata: {
age: 34,
gender: 'male'
},
superpower: ['rich', 'sugardaddy']
};
const { pseudonym, name, superpower } = character;
ES6

const character = {
name: 'Bruce',
metadata: {
age: 34,
gender: 'male'
},
superpower: ['rich', 'sugardaddy']
};
const { pseudonym: alias } = character;
ES6

const coordinate = [7.7956, 110.3695];
const [lat, lng] = coordinates;
ES6

const data = 'Lego City,toys,90290,2';
const [itemName, category, sku, qty] = data.split(',');
console.log(itemName, category, sku, qty);
ES6

Rest parameter — Better interaction with an arbitrary
amount of function parameters.

ES5
function convertCurrency() {
console.log(arguments); !// [1.1, 1, 10, 20]
const rate = arguments[0];
let amounts = [];
for (let i = 1; i < arguments.length; i!++) {
amounts.push(arguments[i]);
}
return amounts.map((amount) !=> amount * rate);
}
console.log(convertCurrency(1.1, 1, 10, 20));
!// [ 1.1, 11, 22 ]

function convertCurrency() {
console.log(arguments); !// [1.1, 1, 10, 20]
const rate = arguments[0];
let amounts = [];
for (let i = 1; i < arguments.length; i!++) {
amounts.push(arguments[i]);
}
}
!// [ 1.1, 11, 22 ]
ES5

function convertCurrency(rate, !!...amounts) {
}
!// [ 1.1, 11, 22 ]
ES6

const runner = ['Mario', 'id123', 4.3, 4.1, 3.6, 1.9, 6.0];
const [name, id, !!...runs] = runner;
console.log(name, id, runs);
!// Mario id123 [ 4.3, 4.1, 3.6, 1.9, 6 ]
ES6

Spread operator — cast any iterable object into an array.

const foods = ['Gudeg', 'Krecek'];
const souvenirs = ['Wayang', 'Batik'];
let shopping = [];
shopping = shopping.concat(foods);
shopping.push('Bakpia');
shopping = shopping.concat(souvenirs);
console.log(shopping);
!// [ 'Gudeg', 'Krecek', 'Bakpia', 'Wayang', 'Batik' ]
ES5

const foods = ['Gudeg', 'Krecek'];
const souvenirs = ['Wayang', 'Batik'];
let shopping = [!!...foods, 'Bakpia', !!...souvenirs];
shopping = ['Bakpia', !!...foods, !!...souvenirs];
shopping = [!!...foods, !!...souvenirs, 'Bakpia'];
ES6

Template literals — Vast improvement upon regular
JavaScript strings.

const name = 'Lucy';
const age = 6;
const sentence = 'My guitar ' + name + ' is ' +
age * 2 + ' years old.';
console.log(sentence);
ES5

const age = 6;
const sentence = `My guitar ${name} is ${age *
2} years old.`;
console.log(sentence);
ES6

const escaped = 'The first line
A second line
Then a third line.';
ES5

const escaped = `The first line
A second line
Then a third line.`;
ES6

const age = 6;
let markup = '<div><h2>Guitar: ' + name + '!</h2>';
markup += '<span class="age">' + age + ' years
old.!</span>!</div>';
ES5

const age = 6;
let markup = `
<div>
<h2>Guitar: ${name}!</h2>
<span class="age">${age} years old.!</span>
!</div>`;
ES6

const Button = styled.a`
display: inline-block;
border-radius: 3px;
padding: 0.5rem 0;
margin: 0.5rem 1rem;
width: 11rem;
background: transparent;
color: white;
border: 2px solid white;
${(props) !=>
props.primary !&&
css`
background: white;
color: palevioletred;
`};
`;
ES6

export const pageQuery = graphql`
query {
allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {
edges {
node {
id
excerpt(pruneLength: 250)
frontmatter {
date(formatString: "MMMM DD, YYYY")
path
title
}
}
}
}
}
`;
ES6

Classes — Provide syntax to represent prototypal inheritance
under the traditional class-based programming paradigm.

const person = { satiety: 0 };
const apple = new Fruit('apple', 140);
apple.chop();
apple.chop();
apple.chop();
apple.bite(person);
apple.bite(person);
apple.bite(person);
console.log(person.satiety); !// 105
console.log(apple.pieces); !// 1
console.log(apple.calories); !// 35
ES5

class Fruit {
constructor(name, calories) {
this.name = name;
this.calories = calories;
this.pieces = 1;
}
chop() {
this.pieces!++;
}
bite(person) {
if (this.pieces < 1) {
return;
}
const calories = this.calories / this.pieces;
person.satiety += calories;
this.calories -= calories;
this.pieces!--;
}
}
ES6

function Banana() {
Fruit.call(this, 'banana', 105);
}
Banana.prototype = Object.create(Fruit.prototype);
Banana.prototype.slice = function() {
this.pieces = 12;
};
ES5

ES6
class Banana extends Fruit {
constructor() {
super('banana', 105);
}
slice() {
this.pieces = 12;
}
}

async/await — Syntactic sugar for promise-based
implementation and take advantage of the synchronous
style of code.

getProfile("rizafahmi")
.then(profile !=> getRepos(profile.login))
.then(repos !=> countTotalStars(repos))
.catch(err !=> {
console.error(err);
});

const countStars = async () !=> {
const profile = await getProfile("rizafahmi");
const repos = await getRepos(riza_profile.login);
const stars = countTotalStars(riza_repos);
};
countStars();

(async () !=> {
const profile = await getProfile("rizafahmi");
const repos = await getRepos(riza_profile.login);
const stars = countTotalStars(riza_repos);
})();

“Talk is cheap show me the code” — Linus Torvalds

github.com/rizafahmi/github-profiler-cli
slideshare.net/rizafahmi
twitter.com/rizafahmi22
facebook.com/rizafahmi
riza@hacktiv8.com
ceritanyadeveloper.com

Essentials and Impactful Features of ES6

More Related Content

What's hot

Similar to Essentials and Impactful Features of ES6

More from Riza Fahmi

Recently uploaded

Essentials and Impactful Features of ES6