Introduction
to
ecmascript 6 -Harmony

Created by Bhaskar

About Me

  • Full Stack Developer
  • Project Manager,Product Manager,Scrum Master
  • Father of two sweet littles
  • Currently Works for EcSoftware

Agenda

  • Introduction ECMAscript
  • ES6 New features
    • Block Level Scope(let,const)
    • Object Creation with ES5,ES6
    • Symbols
    • Destructing Assignment
    • Function Enhancements
      • Default Values
      • Rest Parameters
      • Spread
    • Showhand Functions
    • Generators and Iterators
    • Promises
    • Templates
    • Classes and Inheritance
    • Modules

ECMA Script Overview

  • Brendan Eich invented javascript at Netscape
  • Javascript is developing further by Ecma committee
  • The first edition of this Ecma Standard was adopted by the Ecma General Assembly of June 1997
  • The Ecma General Assembly of June 1998
  • approved the second edition of ECMA-262 to keep it fully aligned with ISO/IEC 16262.
  • Current working draft is 6th Editon
Edition 3.0 Edition 4.0 Edition 5.0,5.1 Edition 6.0
June 2002 Un-published March 2011 Working Version as on Jan 2015
  • Regular Expressions
  • Better String Handling
  • New Control Statements
  • try/catch
  • Defintions of Errors
  • Formating for Numeric Output
Significant work was done but not published due to incompatabile 3.0 and not approved
  • Accessor properties
  • Reflective creation
  • Inspection of objects
  • Program control of property attributes
  • Additional array manipulation functions
  • Support for the JSON
  • Strict mode
  • Became codified de facto interpretations
  • New Methods
  • Block level variables
  • Shorthands on functions
  • Iterators and Generators
  • Symbols
  • Proxies
  • Promise
  • Templates
  • more...

What is the output of the following script?

                        function example() {
    console.log(msg);
    var msg = "hello world";
}
example();

What is the output of this script?

function example2() {
    for (var i = 1; i < 5; i++) {
        setTimeout(function () {
            console.log("Iteration"+i);
        }, 10);
    }
    console.log("Last"+i);
}
example2();
                        
                        

OUTPUT??

                    
undefined //function example1 output

Last5     //function example2 output
Iteration5
Iteration5
Iteration5
Iteration5
                    
                    

Why??

  • Hoisting - Moving declarations to Top
  • Variable Reference is not maintained correctly

Solution Before ES6

    function example2() {
     "use strict";
    for (var i = 1; i < 5; i++) {
        var tempfn = (function(j){
            return function(){
            console.log("Iteration"+j);
            };
        })(i);
        setTimeout(tempfn, 10);
    }
    console.log("Last"+i);
}
example2();
    
    

Solution Through ES6

    function example2() {
    "use strict";
    for (let i = 1; i < 5; i++) {
        setTimeout(function () {
            console.log("Iteration"+i);
        }, 10);
    }
    
}
example2();

    
    

How can I improve this code?

function Product(){
}
Product.prototype.vat=0.02;
Product.prototype.priceWithVat=function(){
return this.price * (1+this.vat)
}
var p = new Product();
p.name = "Product1"
p.price = 100;
console.log(p.priceWithVat());
var p2 = new Product();
p2.name = "Product1"
p2.vat = 0.3;
p2.description = "..."
p2.price = 100;
console.log(p2.priceWithVat());

  • Vat should be fixed
  • manipulation of Vat is restricted.

Is it OK?

                        var Product = {}
Object.defineProperty(Product,"vat",{
value:0.02,
readonly:true
});

Product.priceWithVat=function(){
return this.price * (1+this.vat)
};

var p = Object.create(Product);
p.name = "Product1"
p.price = 100;
console.log(p.priceWithVat());
var p2 = Object.create(Product);
p2.name = "Product1"
p2.vat = 0.3;
p2.price = 100;
console.log(p2.priceWithVat());

                        
                        
  • Take use of Object.defineProperty

Do you have simple solution?

function Product(){
}

Product.prototype.priceWithVat=function(){
const vat = 0.02;
return this.price * (1+vat)
}
var p = new Product();
p.name = "Product1"
p.price = 100;
console.log(p.priceWithVat());
var p2 = new Product();
p2.name = "Product1"
p2.vat = 0.3;
p2.price = 100;
console.log(p2.priceWithVat());
                        

destructuring assignment

                                var product={
name:"Product1",
description:"......",
vat:0.02,
price:120,
attributes:{
    width:100,
    height:200
}
};
function size(product){
    
let {width,height}=product.attributes;
return width * height;
}
describe("Product Attributes ", function () {

    it("Find Size", function () {
        var estimatedValue=100*200;
        expect(size(product)).toBe(estimatedValue);
    });
});
                                
                                

Symbols

A symbol is a unique and immutable data type and may be used as an identifier for object properties. The symbol object is an implicit object wrapper for the symbol primitive data type.
var sym1 = Symbol();
var sym2 = Symbol("foo");
var sym3 = Symbol("foo");
Symbol("foo") === Symbol("foo"); // false
    

Arrow Functions

  • Replace to anonymous functions
  • Sharing this variable for calling function

Iterators

  • Object to iterate over properties.
  • Object implements method 'next'
  • next method return object with value,done properties
    • 'value' Holds Current Item Value
    • if 'done' is false means no item available to iterate
  • use for-of loop to hide the complexity for access data

Maps

  • Provide key-value store
  • It contains various methods return iterators to access data
    • 'keys'
    • 'values'
    • 'entries'

Sets

  • Set objects are collections of values
  • It contains various methods return iterators to access data
    • 'keys'
    • 'values'
    • 'entries'

Generators

Promises

Templates

DSL in Javascript

Classes and Inheritance

Modules

DEMO

Summary

  • How to run ES6 Feature in different environments
  • ES6 New features
    • Block Level Scope(let,const)
    • Object Creation with ES5,ES6
    • Destructing Assignment
    • Function Enhancements
      • Default Values
      • Rest Parameters
      • Spread
    • Showhand Functions(=>)
    • Generators and Iterators
    • Promises
    • Templates
    • Classes and Inheritance
    • Modules

Reference

online ES6 Testing tools

Thank you