This document discusses new features in ES6/ES2015 including let and const (block scope), template strings, arrow functions, default function parameters, destructuring, classes, inheritance, promises, and async/await. It provides code examples for each feature and recommends using Babel to compile JavaScript and use these new features today across browsers.

1. ES6 ES2015 is Beautiful

2. Agenda
Go through ES6 features
Look at random cute animal pics

4. Let(me be!)
var x = 5; let x = 5;
if (1) {
let x = 20;
}
console.log(x);
if (1) {
var x = 20;
}
console.log(x);
Block Scope
Usage

5. Let
for (var i=0; i<5; i++) {
setTimeout( function() {
console.log(i);
}, 100);
}
for (var i=0; i<5; i++) {
(function (scopedI){
setTimeout( function() {
console.log(scopedI);
}, 100);
})(i);
}
for (let i=0; i<5; i++) {
setTimeout( function() {
console.log(i);
}, 100);
}
Avoid Crazy bugs

7. (no) Strings (attached)
var name = 'Monika';
console.log('My name is ' + name);
let name2 = 'Monika';
console.log(`My name is ${name2}`);
var str = 'Template strings providen' +
'syntactic sugar forn' +
'constructing strings.';
let str2 = `Template strings provide
syntactic sugar for
constructing strings.`
Variable Bindings
Multiline Strings

8. Strings
const headline = 'Yahoo products are beautiful.'
headline.startsWith('Yahoo')
// true
headline.endsWith('beautiful')
// true
headline.includes('products')
// true
headline.includes('.')
// false
headline.repeat(2);
//Yahoo products are beautiful.Yahoo products are beautiful.
More
awesomeness!

10. Arrays
var divsArray = [].slice.call(document.querySelectorAll('div'));
divsArray.forEach(function(node) {
console.log(node);
});
let divs = document.querySelectorAll('div');
Array.from(divs).forEach(node => {
console.log(node);
});
var names = ["Monika", "Seth", "Nikhil", "Mallika"];
var res = names.filter(function (name) {
return name === "Monika"; }
)[0];
let names2 = ["Monika", "Seth", "Nikhil", "Mallika"];
let res2 = names.find(function (name) {
return name === "Monika"; }
);
Array like
Find one element

12. Function Shorthand
var fun = function() {
console.log('Yay!')
};
let fun2 = () => console.log('Yay!');
var nums = [1,2,3,4,5];
var numsPlus2 =
nums.map(function(num) {
return num + 2;
});
var nums2 = [1,2,3,4,5];
var nums2Plus2 = nums.map(num => num + 2);
Usage
Awesomeness

13. Function Shorthand
this.x = 42;
setTimeout( function(){
console.log(this.x);
}, 100);
this.x = 42;
var self = this;
setTimeout( function(){
console.log(self.x);
}, 100);
this.x = 42;
setTimeout(() => console.log(this.x), 100);
More Awesomeness

15. Function Parameters - default
function f(x, y) {
if (!y) {
y = 1;
}
return x * y;
}
function f(x, y) {
// y is 12 if not passed (or passed as undefined)
if (typeof y === 'undefined') {
y = 1;
}
return x * y;
}
function f(x, y=1) {
return x * y;
}

16. Function Parameters - Spread...
var nums = [9,10,2];
Math.max(...nums);
var nums = [9,10,2];
Math.max(nums);
var nums = [9,10,2];
Math.max.apply(null, nums);

17. Function Parameters - Rest...
function join(sep, ...nums) {
return nums.join(sep);
}
function join(sep) {
var args = [].slice.call(arguments, 1);
return args.join(sep);
}
join(':', 1, 2, 3);
join(':', 1, 2);

19. Object (of my affection) - Destructuring
const { user, post } = this.props;var user = this.props.user,
post = this.props.post;
function fun({x, y, z=100}) {
return x + y + z;
}
fun({x:3, y:2}); // 105
function fun(data) {
return data.x + data.y;
}
fun({x:3, y:2});
function fun({x,y}) {
return x + y;
}
fun({x:3, y:2});
Destructuring with
default params

20. Objects Literals Extension
var obj = {
// defining prototype on object creation
__proto__: theProtoObj,
// shortcut for ‘handler: handler’
handler,
// shortcut for methods - 'toString: function() {}'
toString() {
// base class method call with 'super'
return 'd ' + super.toString();
},
// dynamic property names
[ 'prop_' + (() => 42)() ]: 42
};

22. (Very) Class(ey)
var Shape = function (id, x, y) {
this.id = id;
this.move(x, y);
};
Shape.prototype.move = function (x, y) {
this.x = x;
this.y = y;
};
class Shape {
constructor (id, x, y) {
this.id = id
this.move(x, y)
}
move (x, y) {
this.x = x
this.y = y
}
}

23. Class Inheritance
var Rectangle = function (id, x, y, width, height) {
Shape.call(this, id, x, y);
this.width = width;
this.height = height;
};
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;
class Rectangle extends Shape {
constructor (id, x, y, width, height) {
super(id, x, y)
this.width = width
this.height = height
}
}

25. Promise (me, you will come back..)
function timeout(duration = 0) {
return new Promise((resolve, reject) => {
setTimeout(resolve, duration);
})
}
var p = timeout(1000).then(() => {
console.log('Done after 1000 sec');
});

26. var request = require('request');
var url1='http://httpbin.org/', url2=url1, url3=url1, url4=url1;
function foo(finalCallback) {
request.get(url1, function(err1, res1) {
if (err1) { return finalCallback(err1); }
request.post(url2, function(err2, res2) {
if (err2) { return finalCallback(err2); }
request.put(url3, function(err3, res3) {
if (err3) { return finalCallback(err3); }
request.del(url4, function(err4, res4) {
// let's stop here
if (err4) { return finalCallback(err4); }
finalCallback(null, "whew all done");
})
})
})
})
}
// use that function somewhere
foo(function(err, message) {
if (err) {
return console.log("error!", err);
}
console.log("success!", message);
});
var Promise = require('bluebird');
var request = Promise.promisifyAll(require('request'));
var url1='http://httpbin.org/', url2=url1, url3=url1, url4=url1;
function foo() {
return request.getAsync(url1)
.then(function(res1) {
return request.postAsync(url2);
}).then(function(res2) {
return request.putAsync(url3);
}).then(function(res3) {
return request.delAsync(url4);
}).then(function(res4) {
return "whew all done";
});
}
// use that function somewhere
foo().then(function(message) {
console.log("success!", message);
}).catch(function(err) {
console.log("error!", err);
});
Promise

27. var Promise = require('bluebird');
var request = Promise.promisifyAll(require('request'));
var url1='http://httpbin.org/', url2=url1, url3=url1,
url4=url1;
async function foo() {
var res1 = await request.getAsync(url1);
var res2 = await request.getAsync(url2);
var res3 = await request.getAsync(url3);
var res4 = await request.getAsync(url4);
return "whew all done";
}
// use that function somewhere
foo().then(function(message) {
console.log("success!", message);
}).catch(function(err) {
console.log("error!", err);
});
Async/ Await - Glimpse

28. So much more..
Modules
Proxy
Generator, Iterator
Maps, Sets
Proxy
Symbols
More...

30. Browser compatible?
Javascript compiler
Use Next Generation Javascript Today!
http://babeljs.io/
Babel
Quick Demo
Using babel-cli
Presets
Pubs presets
npm install --save-dev babel-cli
babel test.js
ynpm install --save-dev babel-preset-pubs
babel test.js --presets=pubs
// Use .babelrc

31. Links
https://yo/es6beauty
http://www.ecma-international.org/ecma-262/6.0/
http://es6-features.org
https://babeljs.io/

32. QnA