Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Intro to ES6 and why should you bother !

367 views

Published on

The presentation walks you through the latest changes in JavaScript, that came as a part of ES6 recommendations.
Intro to few new changes suggested & why should we as JS developer, bother.

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Intro to ES6 and why should you bother !

  1. 1. Moving Ahead With JavaScript v6 - Gaurav Behere - http://www.gauravbehere.in
  2. 2. 1. Quick Glance On JavaScript Evolution. 2. What is ES6 ? 3. Why Should We Bother? 4. Q/A.
  3. 3. 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/
  4. 4. 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.
  5. 5. 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
  6. 6. 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 } console.log(x); // 71 } function letTest() { let x = 31; if (true) { let x = 71; // different variable console.log(x); // 71 } console.log(x); // 31 }
  7. 7. 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
  8. 8. 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();
  9. 9. 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
  10. 10. 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
  11. 11. 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); // 1 console.log(gen.next().value); // 2 console.log(gen.next().value); // undefined ….
  12. 12. 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
  13. 13. 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
  14. 14. Advertisement Time !!!

×