Why ES6

Estimated reading time: 30 minutes

ES6 is the next generation of JavaScript aimed to:

  • ease the development
  • make code more readable and maintainable
  • easy migrations
  • catch the errors and
  • current standards
http://cbwbayarea.org/?headway-trigger=compiler ES6 is the current (or next) version of JavaScript, formal name is ES2015 Browser Support: Chrome 98%, Firefox 90% and Edge at 86%.

Lots of transpilers that supports ES6 for older browsers (like IE old versions) Now it’s the best time to code in ES6

Why ES6?

It’s packed with lot’s of features like:

  • Default Parameters
  • Block Scope – let and const
  • Destructuring
  • Arrow functions
  • Modules
  • Classes
  • Iterators
  • Generators
  • Promises

Default Parameters

Allows us to pass defaults value for the parameters.

In the above code, if name is not passed, we are assigning the “guest”. Even though this code looks good, we can make it better by using http://colorbundles.com/project-lists/projects-prices/ Default Parameters

The advantage of the Default Parameters is, it makes the code more readable. The developer has to look at only one place if they want to add/modify the default parameters instead of looking throughout the function.

Block Scope

In ES5 we have only function level scope, due to this lot of developers suffered from function hoisting where all the declarations are moved to the top of the function and had to deal with the side effects.

Consider the below sample code where the method is expected to return the double value of the variable ‘i’

When you execute the above code, you will be surprised to know that instead of printing values 2, 4, 6 on the console, 6 is printed three times, this is due to the hoisting, the declaration of ‘i’ will be moved to the top of function and each function will refer to its latest value i.e 3 so all of them will return 6.

To avoid this, we can use iffe (immediately invoked function expression or self-executing anonymous function and pass the value of ‘i’ to get the desired result)

As you can see the above code is necessary even for simple things, we can avoid this with block level scoping in ES6 (with let keyword).

Let

http://johnhykel.com/category/philadelphia_immigration_lawyer/tel2154050555 Let allows us to get a block scope.

The above code will print the expected output: 2, 4 and 6

Constants

This allows us to define constants (immutable variables) which do not change. For example, when you want to define an event “FETCH_DATA” Which is used throughout the application to fetch the data.
It’s pretty simple to create a constant

Destructuring assignment

Used to extract data from arrays and objects. The simpler way to copy specific properties from another object.

The above code prints “one”, “two”, “three” respectively.
The above example may not be pretty, let’s take a scenario where you want to exclude third and fourth elements and to pick the rest of the array (You don’t want to modify the original array).
The ES5 code would be

The above code had to use one more built in ‘concat’ method adding to the complexity.
Same thing can be simplified with the Destructuring

Here we simply fetch the two sets of records and assign it to the result array using Destructuring assignment.

Arrow functions

Lot’s of times we have to explicitly bind the context this
With Arrow functions, this will be applied from lexical (containing) scope. These are similar to Lambdas in C#

We can overcome the above problem by changing the context with bind method.
The better way would be using the arrow function, like below

Modules

As the codebase grows, it’s very difficult to organize the code and debug the code. Module encapsulates the common piece of functionality and can be reused.
Fortunately (or unfortunately), there are many popular solutions like AMD, RequireJS, CommonJS, NODE (Even though I like node modules better)

People choose different styles (ap per their personal preference), but there was no common way. ES6 allows us to have a standard module syntax throughout the application

Classes

Creating classes in javascript was never an easy task. Consider declaring the constructor, setting the prototype and what not.

Let alone not forget to reset the constructor property, those who have a little bit experience with javascript (ES5) will understand the pain with this approach.

Of course, all of these can be resolved with helper functions which wrap these things.
But why to bother, welcome ES6 Classes!

Iterators

The old way of looping through the items is using for-in loop.

There are known problems with for-in loop:
– No guarantee with the order of the items looped
– Even properties in the prototype chain will come, so explicitly we need hasOwnProperty check

for-of

Used to work with Iterators

This code:
– Guarantees the order of the items looped

Generators

These are the functions which can quit the execution and come back at a later point of time and execute.
A function declared as function* returns a Generator instance.

Promises

There have been different sets of implementations like Promise/A+, jQuery Deferred, angular $q, deferred.js etc. Now ES6 brings native support so we can use the standard.

Promise represent an operation which is not yet complete. They allow us:
– to handle the asynchronous operations in a synchronous way.
– results are guaranteed, whereas event callbacks fail in few scenarios

Creating a promise is as simple as creating a new object.

You can either resolve (if its success)/reject (on error) a promise.

It's only fair to share...Share on Facebook4Share on Google+0Tweet about this on TwitterShare on LinkedIn0

9 Comments

  1. Hari krish

    Nice work Man, it helps a lot to understand the subject looking forward more articles like this to bring awareness to the people who have no knowledge on the subject

    All the best .

Leave a Reply

Your email address will not be published. Required fields are marked *