Introduction to ECMA Script 6 – New features with examples

When JavaScript was first created, probably the motto was to manipulate the DOM, form submission etc. But slowly and gradually this little web script has grown like a giant. Today JavaScript is being used in browsers, devices, servers and even as database query language. It’s being used for much much more than it’s ever conceived for. ECMA Script harmony or ES6 came up with some significant changes and feature-set to make JavaScript better for those.

Below are the descriptions of most of the newly added features with example. And to try, test and play with ES6 code there are various ways available.

** You can try and test ES6 code in various ES6 playgrounds

The great dot dot dot (rest or spread) operator

I personally find this feature the most interesting one. I’m mentioning it at the very beginning, cause in many examples below you will find me using this …rest feature. For the time being you just think this as an object/array that holds the rest of the values after some initial variable declaration. This feature can be very much useful where you expect a function to accept undefined number of parameters after a certain set of fixed parameters. For better understanding you can imagine the printf function of C language.

Variable declaration

ES6 has emphasized on block scopping. As most of the language uses block scope and not function scope, which JavaScript does use; ES6 decided to introduce two new keywords “let” and “const”. A brief on let, var and const of ES6 in already covered before on Void Canvas, so here I’m just giving the bulet points.

  • Unlike var; let and const are block scopped.
  • let and const variables have temporal dead zones.
  • You can not declare the same variable twice in the same scope. In case of var it doesn’t matter, but let and const will throw error.
  • If a let or const variable is in global scope, unlike var it will not become a property of the global object (window in case of browsers and global in case of node.js)
  • New destructuring feature of objects and arrays are also introduced.
  • To know more about variable declarations you can check our article on ES6 variable declaration.

Example of dot dot dot (rest)

Considering you have gone through our variable declaration article I’m providing the example below for an understanding of …rest.

Functions have tremendous enhancements

There are quite a few new functionalities for function parameter handling; i.e. default values, named parameters, arrow functions, lexical this etc. A brief is as below.

Default parameter values

From ES6 implementation in JavaScript, you will be able to provide default values while defining the function. Below is an example.

Named parameters

Though you have did this with ES5 too; by setting an object as a parameter and accessing the required properties via that object. But ES6 not only removes a “someObject.” but also gave you a more comprehensive and proper way with less memory consumption. Have a look.

Arrow functions

Arrow function is another stylish feature of ECMA Script 6. This is a way to define a function in just a single line; separating the input and output with an => arrow sign.

Lexical this

The this keyword has a significant change. Now this will work exactly like the this in strongly typed language. But as ES6 promised you to give 100% backward compatibility, it didn’t change the “this” in normal functions, but only in arrow functions.

In Example 1, the “this” was not referring to the obj object; rather it was pointing to the current execution context; which is the normal behavior of ES5. But in ES6 if you use “this” keyword inside the arrow function, it will point to the parent object only; which is a normal behavior in Java, C# etc.

This will actually omit the need of that=this; kind of code.

Dot dot dot inside function

Let’s see how our beloved dot dot dot works as a function parameters.

Another beauty of dot dot dot

If you have an array and want to pass each element as a function parameter, your spread operator dot dot dot will help you again. Below is an example.

Class and new Object orientations

Yes, it was very much possible to create classes (constructors to be very specific) in ECMA Script Vanilla; but that was certainly not the best approach. It was too complicated too. ES6 came up with a proper approach of classes which will make inheritance and other OOP related operation very much like strongly typed languages. Below are the examples.

Basic class


As you can see, stuffs are very easy to write and also to understand. The best thing is you can directly call the “super”. No need to call the super by it’s name.

Support to inherit built in classes

You can extend the inbuilt classes of JavaScript too (eg: Object, Error, Array etc).

getters and setters

They work pretty much like ES5.

Static method

The non static members can also be called using the class’s prototype.

Similarity / difference with ES5

  • If you check typeof your class, you will find it’s “Function”. Just like ES5 constructor.
  • But you can’t call the class a function. It will throw error.
  • ClassName.prototype is non-writeable, non-enumerable, non-configurable; however ClassName.prototype.* are writable and configurable, but not enumerable.
  • Hoisting is not allowed for classes. In ES5 classes it was allowed, but ES6 has temporal dead zone for classes.

ES6 classes provide a few clear benefits:

  • Best for the people who worked with other strongly typed languages.
  • Inheritance is very easy and requires less lines of code.
  • For the first time, we will be able to use “super” keyword to refer the base class directly.
  • Built in constructors.
  • This is a foundation for mixins too.
  • JS IDEs will become more intelligent now.
  • They are backwards compatible with much of the current code.

Modules in ES6

Moduling is pretty necessary these days in JavaScript as the apps are getting very big and complicated. IN todays JavaScript world two moduling techniques are very popular. One is CommonJS (node.js style) and another is Asynchronous Module Definition; (require.js style).

In ES6, modules are very similar to both of these techniques. Below are some examples.

Basic overview

You can export the methods and properties from a file, which will be considered as modules. In some other file you can selectively (or all) import them.

In main.js I specifically imported only two functions of math.js; whereas main2.js imported all the functions with a namespace.

The same thing can be done in CommonJS style too. Below is the example.

default export

Now what I want is to export only a single function or a property, or may be a class without any separate name. The new default keyword helps you to do that. Below is an example.

Few more features of modules

  • Rename imports
  • Module IDs are configurable (default: paths relative to importing file)
  • Programmatic (e.g. conditional) loading of modules via an API
  • Module loading is configurable

Template in ES6

This is again another great feature in ES2015. You may have used template engines like handlebars, jade etc and have tasted the easiness of coding with these. ES6 is coming with it’s native template engine, using which not only you can template your code, but the giant template engines like handlebars can become more powerful and faster. Below are few examples of templating in ES6.

Simple template

Previously it was single quote and double quote; now ES6 has come up with back quote. The template string much be in between two back quotes. Below is a simple example

Operations inside curly braces

You can perform normal operations inside that dollar curly braces.

No ugly multi-line string

Upto ES5, it’s really a problem to declare a long string with multi lines. You either have to use escape characters, or have to concat each lines separately. But in ES6 with back quotes you can easily declare a multi line string (an actual multi line string) with no ugliness.

Template helpers

With template helpers the parameters are little weird. If you have a single parameter as string (if dollar curly braces are not used for params), it will be passed to the helper functions as the first param. But if you send value parameter to the helper (using dollar curly braces), you will be able to send multiple parameters and will find this from argument[1].

A complicated one

I’ve already discussed about arrow functions and also about my favorite dot dot dot operator. The example below contains both of these two and of course the templates.

Loops – iterators – generators in ES6

ES6 has introduced a new “for-of” loop, which is capable of iterate through an array or a string (not object). Though it looks pretty similar to “for-in” loop, but it isn’t. New “for-of” loops iterates on values, whereas “for-in” used to do it with property name. The example below will clarify this.

for-of loop example


Generators in ES6 are awesome. Why awesome? Let me describe with an example. Suppose, you are iterating an infinite loop (though it’s bad programming, but just assume the situation). And there are some other tasks who is waiting to be executed. But as JavaScript is single threaded, that task will never run, because the thread was busy and there was no stop or pause.

Even if the while loop is not infinite and iterates 10000 times, than also the setTimeout() won’t be able to execute the function to print “interruption”.

But generators can be paused or interrupted while looping. Interruptions are allowed in these because generators uses yield inside it. Below is an example code of generator.

To know more about ES6 generators you can refer David Walsh’s blog post.


Something like Enum has been introduced to JavaScript now. This is called Symbol. This is a new type of primitive value. Let’s see how Symbol actually works.



Important methods

The two important methods are Symbol.key() and Symbol.keyFor()

Few more on ES6 Objects

Let’s check some other new methods and libraries in ES6 with small examples.


Map is nothing but a key value pair; just like the JavaScript objects. But there are few differences. They are as below:

  • The property key of an object can only be string. Whereas the key of a Map can be string, Object, Function or anything.
  • If you iterate on a Map, it will iterate exactly in the same order the values were pushed, whereas in case of objects this is not followed.
  • Using map.size you can easily get the size of it. But in case of Objects you need to find the size manually.


Set is an Object to store unique primitive as well as object references. However it doesn’t throw error if you want to add a duplicate value, but silently make the set unique.


Now it’s easy to extend or combine two objects with Object.assign(). Below is an example.

More on ES6 String

The methods below belongs to the String.prototype. I mentioned the headings as String.method() for better understanding. Examples describes the usage.





More on ES6 Array

The methods below belongs to the Array.prototype. I mentioned the headings as Array.method() for better understanding. Examples describes the usage.


It finds the first element and stops there.


It finds the index of the first occurrence

Still having issues?

If you still have issues understanding the above article, please leave a comment below and we will try to address that. In case you need help in your projects or understanding anything related to Programming; contact me, Paul Shan for assistance. Thank you for being a reader of VoidCanvas.

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.