Introduction to ES2015

INTRODUCTION TO ES2015
Presentation by /Kiran Abburi @kiran_abburi

ABOUT ME
Consultant & Corporate Trainer
Works primarily with reactjs projects
Offers reactjs training as well

ES2015
New features of javascript
Useful for writing concise code
Need to use babel for ES2015 to ES5 transpilation

CONST
Const is for Single Assignment
Usecases
Deﬁning constants
Variables that doesn't change after ﬁrst assignment
const MAX_HEIGHT = 500
MAX_HEIGHT = 600 // Throws error
const completedTodos = todos.filter(function (todo) {
return todo.completed
})

LET
let is block scoped
use let instead of var
let i = 5
for (let i = 0; i < 10; i++) {
}
console.log(i) // 5
var i = 5
for (var i = 0; i < 10; i++) {
}
console.log(i) // 10

ARROW FUNCTIONS
=> syntax for function shorthand
ES2015
const completedTodos = todos.filter(todo => todo.completed)
const completedTodos = todos.filter((todo) => {
})
ES5
var completedTodos = todos.filter(function (todo) {
})

ARROW FUNCTIONS
arrows share the same lexical this as their surrounding
code
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)
}
}

CLASSES
Classes support prototype-based inheritance
The constructor method for creating and initializing an
object created with a class
Static methods are called without instantiating their class
Instance 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 {
this.price = price;
}
calculatePrice(units) {
return this.price * units
}
}
class Apple extends Fruit {
super(price)
}
}
const a1 = new Apple(2)
a1.calculatePrice(10) // 20

TEMPLATE STRINGS
Multiline strings
ES2015
`line1 text
line2 text`
ES5
'line1 text' + 'n' + 'line2 text'

TEMPLATE STRINGS
Interpolate variables
ES2015
const msg = `Hello ${firstName} ${lastName}`
ES5
var msg = 'Hello ' + firstName + ' ' + lastName

DESTRUCTURING
Array destructuring
const [a, ,c] = [1,2,3];
a === 1;
c === 3;
Object destructuring
const values = {a: 1, b: 2, c: 3}
const {a, c} = values
a === 1;
c === 3;

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

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

SPREED OPERATOR
function f(x, y, z) {
// x === 1
// y === 2
// z === 3
}
f(...[1,2,3])

SET
let mySet = new Set([1, 2, 3, 4, 5])
mySet.add(6)
mySet.add(5)
mySet.has(5) // true
mySet.size // 6
mySet.delete(5)
for(let i of mySet.values()) {
console.log(i)
}
mySet.forEach(function (item) {
console.log(item)
})

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

MAP ITERATIONS
let 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)
}

PROMISES
let 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))

GENERATORS
function* 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()) // returns {"done":true}

GENERATORS
function* 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) // 2

GENERATORS
function* 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
}
}

MODULES
Modules help us organize the code in seperate ﬁles
Avoid global namespace collision
Easy to share code across projects
Simpliﬁes using opensource code in our project

MODULES
// math.js
function subtract (x, y) {
return x - y
}
export default function add (x, y) {
return x + y
}
// app.js
import add from './math'

MODULES
// math.js
export function subtract (x, y) {
return x - y
}
export function add (x, y) {
return x + y
}
// app.js
import {add, subtract} from './math'
or
// import * as math from './math'
// math.add, math.subtract

MODULES
// math.js
export function subtract (x, y) {
return x - y
}
export function add (x, y) {
return x + y
}
export default calc() {
}
// app.js
import calc, {add, subtract} from './math'

Introduction to ES2015

More Related Content

What's hot

Similar to Introduction to ES2015

Recently uploaded

Introduction to ES2015