Intro to ES6 and why should you bother !

Moving Ahead With
JavaScript v6
- Gaurav Behere
- http://www.gauravbehere.in

1. Quick Glance On JavaScript Evolution.
2. What is ES6 ?
3. Why Should We Bother?
4. Q/A.

JavaScript Evolution
JavaScript, was created in 10 days in May 1995 by Brendan Eich, working at Netscape and now of
Mozilla. JavaScript was not always known as JavaScript: the original name was Mocha, a name
chosen by Marc Andreessen, founder of Netscape.
In September of 1995 the name was changed to LiveScript, then in December of the same year,
upon receiving a trademark license from Sun, the name JavaScript was adopted. This was
somewhat of a marketing move at the time, with Java being very popular around then.
In 1996 - 1997 JavaScript was taken to ECMA to carve out a standard specification, which other
browser vendors could then implement based on the work done at Netscape. The work done over
this period of time eventually led to the official release of ECMA-262 Ed.1: ECMAScript is the
name of the official standard, with JavaScript being the most well known of the implementations.
ActionScript 3 is another well-known implementation of ECMAScript.
In July of 2008 the disparate parties on either side came together in Oslo. This led to the eventual
agreement in early 2009 to rename ECMAScript 3.1 to ECMAScript 5 and drive the language
forward using an agenda that is known as Harmony.
Current status: ECMA 6 draft is ready & published with pending approvals.
http://people.mozilla.org/~jorendorff/es6-draft.html
Compatibility:
https://kangax.github.io/compat-table/es6/

What is in ES6 ?
Highlights:
1. Better syntax, more verbose.
2. Modules, AMD, Async Module Definition.
3. Developer friendly APIs.
4. Better code structuring.
5. Lesser effort/ number of lines than JS v5.

A Bit of Deep Dive
De-structuring – A new and flexible way to assign values from arrays or objects into
variables.
Array de-structuring
var foo = ["one", "two"];
// without destructuring
var one = foo[0];
var two = foo[1];
// with destructuring
var [one, two] = foo;
Object de-structuring
var o = {p: 42, q: true};
var {p, q} = o;
console.log(p); // 42
console.log(q); // true

Block-level scope – ES6 now supports scoping variables to blocks (if, for, while, etc.) using
the let keyword.
Note: Variables declared by let have as their scope the block in which they are defined, as
well as in any contained sub-blocks. In this way, let works very much like var. The main
difference is that the scope of a var variable is the entire enclosing function.
Eg:
function varTest() {
var x = 31;
if (true) {
var x = 71; // same variable!
console.log(x); // 71
}
}
function letTest() {
let x = 31;
if (true) {
let x = 71; // different variable
}
}

Classes – ES6 classes provide a way to encapsulate and extend code.
Note: ES6 has only added a syntactical change to this as a function in JavaScript behaves as
a class.
Eg:
class Polygon {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
Constants – You can now define constants in ES6 code using the const keyword. (This is
already provided by Chrome since long)
Eg:
const my_fav = 7;
Default parameters – Ever wished that a function parameter could be assigned a default
value? You can do that now in ES6.
Eg:
function multiply(a, b = 1) {
return a*b;
}
multiply(5); // 5

Map – Dictionary type object that can be used to store key/value pairs.
Note: We were using array’s associative property to serve as a map, but this had limitations
like getting length & iteration was dependent on Object.keys
Eg:
var myMap = new Map();
myMap.set(“myKey”, “myValue”)
myMap.get(“myKey”); // “myValue”
Modules – Provides a modular way of organizing and loading code.
The usage & module definition is on the lines of commonJS.
Eg:
//File module.js
var someFunction(){
…..
}
var myModule = function(){
return someFunction()
}
export myModule;
//file client.js
Import myModule from ‘module.js’
myModule();

Promises – Used with asynchronous operations. Because async operations still have
problems.
Syntax:
new Promise(function(resolve, reject) { ... });
Rest parameters – Replaces the need for using arguments to access functions arguments.
Allows you to get to an array representing “the rest of the parameters”.
Eg:
function fun1(...theArgs) {
console.log(theArgs.length);
}
fun1(); // 0
fun1(5); // 1
fun1(5, 6, 7); // 3

Arrow functions – A short-hand version of writing an anonymous function.
Syntax:
([param] [, param]) => {
statements
}
param => expression
Eg:
var a2 = a.map(function(s){ return s.length });
Can be reduced to:
var a3 = a.map( s => s.length );
Generators – Specialized functions that can be paused & restarted & can be used as iterators,
declared using function* and the yield keyword.
Note: Calling a generator function does not execute its body immediately; an iterator object for the
function is returned instead. When the iterator's next() method is called, the generator function's
body is executed until the first yield expression, which specifies the value to be returned from the
iterator or, with yield*, delegates to another generator function. The next() method returns an object
with a value property containing the yielded value and a done property which indicates whether the
generator has yielded its last value
Run..Stop..Run

Syntax:
function* name([param[, param[, ... param]]]) {
statements
yield value;
}
Name.next().value;
Eg:
function* idMaker(){
var index = 0;
while(index < 3)
yield index++;
}
var gen = idMaker();
console.log(gen.next().value); // 0
console.log(gen.next().value); // undefined
….

Why Should We Bother ?
1. It is the future & we want to remain in the race.
2. Terminology & the language in which developers, websites,
blogs, references etc talk, will change.
3. Most importantly : The libraries which we are currently
depending on, are changing and adapting ES6 features.
Our ground is going to shake, let’s be prepared.
4. Dependency on requireJS for AMD, Kriskowal’s q for
Promises, Underscore for better Collection Processing etc
will be gone

Angular 2.0
1. Usage of classes.
2. Usage of modules.
3. Arrow functions.
4. Default parameters.
5. Rest parameters.
6. No controllers, scopes or
directives
Do watch : ES6 in Angular 2.0 by Erik Arvidsson at ng-europe 2014
https://www.youtube.com/watch?v=iij5RHKi66o
And Angular 2.0 Core by Igor Minar & Tobias Bosch at ng-europe 2014
https://www.youtube.com/watch?v=gNmWybAyBHI

Intro to ES6 and why should you bother !

More Related Content

Intro to ES6 and why should you bother !