Introduction to ES2015

INTRODUCTION TO ES2015Presentation by / Kiran Abburi @kiran_abburi

ABOUT MEConsultant & Corporate TrainerWorks primarily with reactjs projectsOffers reactjs training as well

ES2015New features of javascriptUseful for writing concise codeNeed to use babel for ES2015 to ES5 transpilation

CONSTConst is for Single AssignmentUsecases

Defining constantsVariables that doesn't change after first assignment

const MAX_HEIGHT = 500 MAX_HEIGHT = 600 // Throws error

const completedTodos = todos.filter(function (todo) { return todo.completed })

LETlet is block scopeduse let instead of var

let i = 5for (let i = 0; i < 10; i++) {

}console.log(i) // 5

var i = 5for (var i = 0; i < 10; i++) {

}console.log(i) // 10

ARROW FUNCTIONS=> syntax for function shorthand

ES2015const completedTodos = todos.filter(todo => todo.completed)

const completedTodos = todos.filter((todo) => { return todo.completed})

ES5var completedTodos = todos.filter(function (todo) { return todo.completed})

ARROW FUNCTIONSarrows share the same lexical this as their surroundingcode

ES2015 { counter: 0, incrementCounter() { setInterval(() => this.counter = this.counter + 1, 1000) } }

ES5{ counter: 0, incrementCounter: function() { var that = this setInterval(funciton () { that.counter = that.counter + 1 }, 1000) }}

CLASSESClasses support prototype-based inheritanceThe constructor method for creating and initializing anobject created with a classStatic methods are called without instantiating their classInstance methods are run on class

class Fruit { constructor(price) { this.price = price; } static defaultValues() { return {price : 1} } calculatePrice(units) { return this.price * units } } const f1 = new Fruit(2) const f2 = new Fruit(5) f1.calculatePrice(10) // 20 f2.calculatePrice(10) // 50 Fruit.defaultValues() // {price: 1}

CLASSES class Fruit { constructor(price) { this.price = price; } calculatePrice(units) { return this.price * units } } class Apple extends Fruit { constructor(price) { super(price) } }

const a1 = new Apple(2) a1.calculatePrice(10) // 20

TEMPLATE STRINGSMultiline strings

ES2015l̀ine1 text line2 text̀

ES5'line1 text' + '\n' + 'line2 text'

TEMPLATE STRINGSInterpolate variables

ES2015const msg = ̀Hello ${firstName} ${lastName}̀

ES5var msg = 'Hello ' + firstName + ' ' + lastName

DESTRUCTURINGArray destructuring

const [a, ,c] = [1,2,3];a === 1;c === 3;

Object destructuring

const values = {a: 1, b: 2, c: 3}const {a, c} = valuesa === 1;c === 3;

DEFAULT FUNCTION PARAMETERSconst f(x = 2) { return x} f() === 2f(5) === 5

REST OPERATORconst f(x, ...y) { // x === 1 // y === [2, 3, 4]}

f(1, 2, 3, 4)

SPREED OPERATORfunction f(x, y, z) { // x === 1 // y === 2 // z === 3}

f(...[1,2,3])

SETlet mySet = new Set([1, 2, 3, 4, 5])mySet.add(6)mySet.add(5)

mySet.has(5) // truemySet.size // 6mySet.delete(5)

for(let i of mySet.values()) { console.log(i)}

mySet.forEach(function (item) { console.log(item)})

MAPlet myMap = new Map()myMap.set('x', 5)myMap.get('x') // 5myMap.size // 1myMap.delete('x')

MAP ITERATIONSlet myMap = new Map([['x', 1], ['y', 2], ['z', 3]])for (let key of myMap.keys()) { console.log(key)}for (let key of myMap.values()) { console.log(key)}for (let [key, value] of myMap.entries()) { console.log(key, value)}

PROMISESlet p1 = new Promise(function (resolve, reject) { setTimeout(() => { resolve('success') }, 1000)})

p1 .then((data) => console.log('on resolve', data)) .catch((error) => console.log('on reject', error))

GENERATORSfunction* numbers() { console.log('1') yield 1 console.log('2') yield 2 console.log('3') yield 3}

const num = numbers()console.log(num.next()) // prints '1' and returns {"value":1,"done":false}console.log(num.next()) // prints '2' and returns {"value":2,"done":false}console.log(num.next()) // prints '3' and returns {"value":3,"done":false}console.log(num.next()) // returns {"done":true}

GENERATORSfunction* fibonacci() { let pre = 0, cur = 1; while (true) { [pre, cur] = [cur, pre + cur]; yield cur }}

const fib = fibonacci()console.log(fib.next()) // {value: 1, done: false}console.log(fib.next().value) // 2console.log(fib.next().value) // 3console.log(fib.next().value) // 5console.log(fib.next().value) // 8

GENERATORSfunction* fibonacci() { let pre = 0, cur = 1; while (true) { [pre, cur] = [cur, pre + cur]; yield cur }}

for (let n of fibonacci()) { console.log(n) if (n > 100) { break }}

MODULESModules help us organize the code in seperate filesAvoid global namespace collisionEasy to share code across projectsSimplifies using opensource code in our project

MODULES// math.jsfunction subtract (x, y) { return x - y}export default function add (x, y) { return x + y}

// app.jsimport add from './math'

MODULES// math.jsexport function subtract (x, y) { return x - y}export function add (x, y) { return x + y}

// app.jsimport {add, subtract} from './math'

or// import * as math from './math'// math.add, math.subtract

MODULES// math.jsexport function subtract (x, y) { return x - y}export function add (x, y) { return x + y}export default calc() {

}

// app.jsimport calc, {add, subtract} from './math'

QUESTIONS