Bloom Lab: Meet ECMA Script 2015 (ES6)

ECMAScript 6

ES6 is the next generation of JavaScript, standard update since 2009.
The frameworks like AngularJS, Ember, Aurelia, etc. are already targeted on ES6 future releases.

What is New?

This ECMAScript update brings a lot of useful stuff into JS world.

Here are some of new features to enjoy:

block scoped variables;
arrow functions;
default parameters, rest & spread operators;
string interpolation;
binary, octal; string unicode & regexp literals;
Array element finding;
properties shorthand;
destructing assignment;
Modules, Classes & Promises;
Map/WeakMap & Set/WeakSet;
Iterators & Generators;
for...of loop;

## Declarations `let` & `const`

### `let` against `var`
Yeay `let` variables exist ONLY within the scope of the code block   
*(between `{` & `}` like in java)*.

Just to remind `var` variables exist in the entire function scope, so those are available outside `if` statements and `for` loops, etc.  
Also when we try to access not declared `var` variable we would have an `undefined`*(more error prone)* instead of the `ReferenceError` like with `let`.

Was with `var`:

function doSomething() {
         console.log(str);        // undefined
         if (flag) {
             var str = "Blah";
         }
         console.log(str);        // "Blah"
     }

Become with `let`:

function doSomething() {
         console.log(str);        // ReferenceError(str is not defined);
         if (flag) {
             let str = "Blah";
             console.log(str);    // "Blah"
         }
         console.log(str);        // undefined
     }

So, with `let` we aren't forced to move variable declarations to the top of function *(hoising)* any more.
Declaring variables in the place where we assign the value, makes the code more clean & readable.

Notice the following code sample:

let msg = "look closer";

function printInCaps(value){
         let msg = value.toUpperCase();
         return message;
    }

printInCaps("eyes");

console.log(msg);             // "look closer"

Accessing the `var i` inside the callback is dangerous:

function loadProfiles(users){
        for (var i in userNames){
            _fetchUser(userNames[i], function(){
                console.log(userNames[i]);         // "Joe", "Joe", "Joe"
            }
       })
    }

loadProfiles(["Elisa", "Daniel", "Joe"]);

As we saw it sneaky outputs same value for all iterators 0_o.
Using `let` avoids such mistakes.

Also, if we have few not nested `for` loops, we could use `let i` for both of those, 
cause `let` exists only withing the code block.

### `const` against `let`
JS Constants must be assigned in the declaration line. Otherwise, `SyntaxError`.  
`const` could not be reassigned unlike `let`.
Constants are Block scoped as well as `let` variables.

Using `const` is appropriate to replace *magic numbers*.

const MAX_TIME_MIN = 25;
    const SEPARATOR = "/";

----
## Functions

### Method defaults `fooBar(flag = true)`
Method defaults appear in ES6, that look exactly like in AS3.0.

Was:

function doSomething(count) {
        let count = count || 100;
    }

Became:

function doSomething(count = 100) {
       //...  
    }

### Named Parameters `fooBar(id, {tag, num})`
Shortened syntax appears to declare variables with same names as passed ones and assign those values at once.

Was:

function setTimer(name, options){        
        var timeLeft = options.timeLeft;
        var expires = options.expires;
        console.log(timeLeft);
    }

Became:
    
    function setTimer(name, { timeLeft, expires } = {}){ 
        console.log(timeLeft);
    }

With Default Named param:

function setTimer(name, { timeLeft, expires } = {}){ 
        let settings = _parseSettings(timeLeft, expires);
    }

### RestParameters (Varargs) `displayTags(...tags)`
Similar to As3.0 & Java varargs, u can pass any number of arguments separated by `,`.

In function definition

function displayTags(...tags);

In function invocation

displayTags('fantasy', 'science');

or via Spread Operator

var tags = ['fantasy', 'science'];
    ...
    displayTags(...tags);  //splits the array automatically

### Arrow functions `(arg1, arg2)=> { /*..some logic*/ }`
Allow functions bind to the scope where those are defined *(lexical binding)*.   
So, `this` inside a function will point not to the function scope but to the instance scope.

let printName = function(name){
        console.logname);
    }

Arrow function, that preserves the scope:

let printName = (name)=> {
        console.log(this.position + name);
    }

Component Example

function ActiveUsersComponent(target, topicId){
        this.targetElement = target;
        this.topicId       = topicId;
    }

ActiveUsersComponent.prototype.render = function(){
       getActiveUsers(this.topicId, (data) =>{
           let userNameDivs = appendUserNames(...data.userNames);
           appendToSidebar(this.targetElement, userNameDivs);
       });
    };

let component = new ActiveUsersComponent(".active-users", 17);
    component.render();

----
## Objects & Strings
### Object Initializer Short Hand `let book = {title, genre}`
Assigns the values from variables to object properties with same name.

let title = "CoolStory";
    let genre = "Fiction";
    let author = "Joe"
    let year = 2015;

// creates the book obj with same property names & passed values.
    let book = {title, genre, author, year};

### Object Destructuring `let {title, genre} = book`
Acts vise-versa to the *object initializer shorthand*.
Assigns the properties from returned object properties to variables

let {title, genre, author} = buildBook("CoolStory", "Fiction");
    console.log(title);
    console.log(genre);

### Adding Function to Object
`function` keyword is not necessary any more

Was:

return {
        title: "CoolStory",
        isActive: function() {    
            return true;
        }
    }

Became:

return {
        title: "CoolStory",
        isAvailable() {     
            return true;
        }
    }

### Template Strings ``Hello ${username}``
Interpolates the variables in the string templates.

Was:

let fullName = firstName + " " + lastName;

Became:
    
    let fullName = `${firstName} ${lastName}`;

### Object Assign `let settings = Object.assign({}, defaults, options)`
Using Local Object to group Defaults is better

Was:  
   
    function countDown (target, timeLeft, options = {}) {
        let target = target;
        let timeLeft = timeLeft || 5000;
        let timeUnit = options.timeUnit || "milliseconds";
        let timeOut = options.timeOut || 10 * 1000;
    }

Became:

And now we have to merge defaults with options that weren't defined:

function moveTarget (target, timeLeft, options = {}) {
        let target = target;
        let defaults = {
            //...
        };
        
        // {} is result object that will be returned   
        let settings = Object.assign({}, defaults, options)
    }

Note: each next options argument fields will override the previous object:

let settings = Object.assign({}, defaults, options, options2, options3)

----
## Arrays
### Array Destructuring `let [a, b] = ["ES6", "JS"]`
We can assign the elements to variables via using an array destructing syntax:

let genres = ["science", "fiction", "drama"];
    let [a, b, c] = genres;
    console.log(a, b, c);

we can skip some elements

let genres = ["science", "fiction", "drama"];
    let [a, , b] = genres;
    console.log(a, b);

or assign remaining elements rest elements
   
    let [first, ...remainingUsers] = ["Sam", "Tyler", "Brook"];
    addActiveUsers(first, remainingUsers);

### `for...of` loop iterates through property values   
`for...of` it's like `for...each` but can't be used to look through the plain object properties *(facepalm)*:

let genres = ["science", "fiction", "drama"];
    for (let genre of genres) {
        console.log(genre);
    }

An Object needs a special function assigned to it's `Symbol.iterator` property.

console.log(typeof genres[Symbol.iterator]);  // >function. so, it's ok to use it with for...of

### Find an element in Array via `Array.find()`
`Array.find` returns first element in array that satisfies provided testing function.

let books = [
        {title:"A", genre:"fiction"},
        {title:"B", genre:"science"}, 
        {title:"C", genre:"drama"}
    ];

let book = books.find( (book)=>{ 
        return book.genre == "science";
    })

Or to make it shorter, we can remove `return` & curly braces

let book = books.find( book => book.genre == "science");

----
## Maps
Maps based on regular Objects could apply ONLY Strings as the Keys.  
Maps support Object as the Keys, not only String.

let usersMap = new Map();
    usersMap.set(user1, 7);
    usersMap.set(user2, 27);

It's appropriate to use `Map` if the Keys are unknown until run-time.  
It's likely to use maps when all Keys are of the same type & all Values have the same type.

Take a look how we could use destructuring to assign key value to variables at once in `for...of` loop:

let recentPosts = new Map();
    recentPosts.set( "Joe", "ES2015" );
    recentPosts.set( "John", "JavaScript" );
    recentPosts.set( "Daniel", "AngularJS" );

for( let [user, postTitle] of recentPosts ){
        console.log(`${user} = ${postTitle}`);
    }

If Keys are predefined and those type of String we still can continue to use the regular Object as a map, 
but `for..of` won't work in this case.

### Weak Map
If we're using the Objects as the Keys it's more preferable to use `WeakMap` 
to not prevent Garbage Collector to do it's job.

let usersMap = new WeakMap();

----
## Sets
`Set` avoids duplicates:

let genres = new Set();
    genres.add("fiction");
    genres.add("science");
    genres.add("science");
    console.log("Total Genres: " + genres.size)

let [ first ] = genres;
    console.log(\`First Genre: ${first}\`)
    
### Weak Set
As with a `WeakMap` there is a `WeakSet`, were the ONLY Objects are allowed to be stored.  
`WeakSet` is more memory efficient than `Set`.  
However, `WeakSet` CAN NOT be used with the `for...of`, otherwise `TypeError`!

let uniqueUsers = new WeakSet();
    uniqueUsers.add(user);
    uniqueUsers.has(user);           // true
    uniqueUsers.delete(user);        // true

----
## Classes
Was via Function approach:

function Widget(name, label, url) {
        this.name = name;
        this.label = label;
        this.url = url;
    }

Widget.Prototype.render = function() {
       //render logic
    }

Become with Classes Syntactic Sugar:

class Widget {
        
        constructor(name, label, url) {
            this.name = name;
            this.label = label;
            this.url = url;
        }

render() {
            //render logic
        }
    }

Note: instance field created in constructor are accessible in the rest of functions via `this.` as well.

### Inheritance
 
    class NewWidget extends Widget{
        
        constructor(name, label, url) {
            super(name, label, url)
        }

render() {
            super.render();
            // ...some logic
        }
    }

----
## Modules

Previously we included every *\*.js* file into *.html* file to global namespace:
    
    <!DOCTYPE html> 
    <body>
         <script src="./app.js"></script>
         <script src="./alert-message.js"></script>
    </body>

Now we're able to import *\*.js* module where we need it:

So, first we need export 
*alert-message.js*

export default function(message){
       alert(message);
    }

Or for multiple functions:

function alertMessage(message){
       alert(message);
    }

function logMessage(message){
       console.log(message);
    }
    
    export { alertMessage, logMessage };

Than we import needed *\*.js* file into *app.js*

import alertMessage from './alert-message';
    
    alertMessage(message);

To import multiple functions:

import {alertMessage, logMessage} from './alert-message';

To import whole module functions:

import * as alertObj from './alert-message';
    
    alertObj.alertMessage(message);
    alertObj.logMessage(message);

Here's how *index.html* looks like, after changes:
    
    <!DOCTYPE html> 
    <body>
         <script src="./app.js"></script>
    </body>

### Extract the Constants to common place
It's appropriate to create a separate module for the application constants:

*constants.js*

export const MAX_DAYS;
    export const MAX_USERS;

*app.js*

import {MAX_DAYS, MAX_USERS} from './constants';

### Export Classes via Modules
Same approach like with functions.  
We can use Default Export:

export default class MyWidget{/*...*/}

Or Named Export:

class Widget{/*...*/}
    
    export {Widget};

Than import and create an instance:

*app.js*

import MyWidget from './my-widget';
    let myWidget = new MyWidget();

----
## Promisses
Creating a new Promise automatically sets it to the `pending` state.  
Then, it can move to either `fulfilled` state if success or to `rejected` state if fail.

### Async programming
Avoid blocking the main thread.

Synchronous style is Bad:

let results = queryUsersFromServer(); //Whole Page freezes here
    ui.renderUserList(results);

Asynchronous style is Good:

queryUsersFromServer(function(results){
        ui.renderUserList(results);
    });

The passed callback will render the UserList whenever the fetching from the server is done, without locking the rest of the application.

In continuation passing style(CPS) async programming we tell function how to continue executing by passing callback, which could grow to very nested code.  
To simplify the async code writting and make it more readable we have to use `Promise`s.

Asynchronous style with Promises is even Better than CPS:

queryUsersFromServer()
        .then(function(results) { ui.renderUserList(results); })
        .then(function() { ui.fooBar(); })
        .catch(function(error){
            console.log("Error: " + error);
        });

### Creating new Promise
`Promise` constructors takes an anonymous function with two arguments for success and fail cases handling.

function queryUsersFromServer() {
        return new Promise(function(success, error){
             //...
             success(data);  // resolve
             //...
             error(data);    // or reject
        });
    }

For example:
    
    function queryUsersFromServer(pollName) {
        return new Promise(function(resolve, reject){
           let url = `/results/${pollName}`;
           let request = new XMLHttpRequest();
           request.open('GET', url, true);
           request.onload = function() {
               if (request.status >= 200 && request.status < 400) {
                   resolve(JSON.parse(request.response));
               } else { 
                   error(new Error(request.status)); 
               }
           };
           request.onerror = function() {
               error(new Error("Error fetching results from server")); 
           }
       
           request.send();
        });
    }

### Passing results from One `then` to Another
We can pass the result from one `then` to the next one by simply returning some value in current one:

queryUsersFromServer()
      .then(function(results) { 
           return results.filter((results) ==> result.age >= 18); 
      })
      .then(function(adultUsers) { ui.fooBar(adultUsers); })
      .catch(function(error){
          console.log("Error: " + error);
      });

We can also extract that logic to the methods and pass a function name:

function filterUsers(results) { 
        return results.filter((results) ==> result.age >= 18); 
    }

function doSomethingElse(adultUsers) { 
        ui.fooBar(adultUsers); 
    }

queryUsersFromServer()
      .then(filterUsers)
      .then(doSomethingElse)
      .catch(function(error){
          console.log("Error: " + error);
      });

----
## Iterators
Arrays are **iterable** but objects are **not iterable**.  
We can use `for...of` loop ONLY with **iterable** entities *(Array, Map, Set)*.

let genres = ["science", "fiction", "alternative"];

for (let genre of genres) {
        console.log(genre);
    }

Iterables return an `iterator` object:

let iterator = genres[Symbol.iterator]();

let first = iterator.next();
    console.log(first.value);      // > "science"
    console.log(first.done);       // > false
    
The `done` will be `false` if it has Next element. And if iterator past the end it's `true`.  
The last pass through of iterator returns the following object:

`{done: true, value: undefined}`

### Make a plain object Iterable
To follow an iterator contract we can simly make any plain object iterable:

let user {
        name: "Joe",
        age: 25
    }

user[Symbol.iterator] = function() {
        // returns array with property names
        let properties = Object.keys(this);
        let count = 0;
        let isDone = false;
        let next = ()=> {
           if (count >= properties.length) {
               isDone = true;
           }
           return {done: isDone, value: this[properties[count++]]}; 
        }
        return next;
    }

So, now we can iterate through our object and display the value for each property:

for (let v of user) {
        console.log(v);
    }

The benefit over `for...in`, is since it's become iterable:

* we can use Spread Operator *(read values as an array)*:

let values = [...user];
        console.log(values);      // > ["Joe", 25];

* we can use Destructuring *(assign values to local variables at once)*:

let [name, age] = user;
        console.log(name);        // > "Joe"
        console.log(age);         // > 25

----
## Generators
### Generator functions
The special `function *` declaration defines generator function, where the `yield` keyword could be used to return iterator objects.

function *userNames() {
        yield: "Joe";         // `{done: false, value: "Joe"}`
        yield: "Danny";       // `{done: false, value: "Danny"}`
    }

Or:

function *userJoe() {
        yield: "Joe";         // `{done: false, value: "Joe"}`
        yield: 25;            // `{done: false, value: 25}`
    }

So basically our Iterable user:

user[Symbol.iterator] = function *() {
        yield: this.name;
        yield: this.age;
    }

Other words, the objects returned by Generator functions provide the same next method expected by `for...of`,
the *spread operator*, and the *destructuring assignment*;

for(let name of userNames()){
       console.log(name);
    }

let names = [...nameList()];
    console.log(names);

let [first, second] = nameList();
    console.log(first, second);

So, we can replace our custom

let user {
        name: "Joe",
        age: 25
    }

user[Symbol.iterator] = function *() {

let properties = Object.keys(this);
        for (let p of properties) {          // same as manually above
            yield this[p];
        }
        return next;
    }

Well Done!   
Now we can apply received info on your daily bases to make our life simpler.

----  
## see Also
* [BabelJS Compiler - Use next JS generation, today](http://babeljs.io/)
* [ES6 Features & Comparison](http://es6-features.org/)
* [Understanding ECMAScript 6](https://leanpub.com/understandinges6/read)
* [ECMA2015: The Shape of Java Script to Come - Slides](http://courseware.codeschool.com/es2015-the-shape-of-javascript-to-come/all-levels.pdf)
* [Best Practice: Executions & Memory Control in JavaScript](http://bloomlab.blogspot.com.ee/2015/11/best-practice-executions-memory-control.html)
* [Best Practice: Loops Optimization](http://bloomlab.blogspot.com.ee/2015/11/best-practice-loops-optimization-in.html)
* [Fun with an Algorithm complexity](http://bloomlab.blogspot.com.ee/2014/07/fun-with-algorithm-complexity.html)
* [JS - The Right Way](http://jstherightway.org/)
* [Tutorials Point - Best Practices](http://www.tutorialspoint.com/developers_best_practices/)
* [Keynote: Top JS frmeworks 2015](http://bloomlab.blogspot.com.ee/2015/03/top-javascript-frameworks-2015.html)

Bloom Lab

Pages

Monday, November 30, 2015

Meet ECMA Script 2015 (ES6)

ECMAScript 6

What is New?

No comments:

Post a Comment