introduction to es2015
TRANSCRIPT
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;
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)})
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'