ES6 - 101

ES6 known to many as Harmony or es-next or ES2015 (preferred way) is the latest specification in the JavaScript world. In this article we'll go through some of the improvements and enhancements that ES6 has to offer.

String operations

If you come from Python background, then these new additions to the String library should easily make sense. For example,

  1. Check if one string is part of another string

    var str1 = 'foobar';
    var str2 = 'foo';
    console.log(str1.includes(str2)); //true
  2. String repetition

    var str = 'foo';
    console.log(str.repeat(2)); //foofoo
  3. String templates

    > var str1 = 'Foo';
    > var str2 = 'Bar';
    > console.log(`My name is ${str1} ${str2}.`);
    > My name is Foo Bar
  4. Multiline strings

    > var str = (`Hello World`);
    > console.log(str);
    > Hello
    > World


Destructuring allows us to extract values from arrays and objects (even deeply nested) and store them in variables with a more convenient syntax.

  1. Destructuring arrays

    > var \[a, b, c, d\] = \[1, 2, 3, 4\];
    > console.log(a);
    > 1
  2. Destructuring objects

    > var {foo, bar} = {'foo': 1; 'bar': 2};
    > console.log(foo);
    > 1


Yes, you read it right, JavaScript finally allows you split your code in modules and then you selectively export and import them. Some of the common techniques are described below,

  1. Exporting a variable, function etc.,

    /* Exporting a variable */
    export var name = 'foo';
    /* Exporting multiple functions at once */
    function add(a, b){
        return a + b;
    function sub(a, b){
        return a - b;
    export {add, sub};
    /* Export functions separately */
    export function add(a, b) {
        return a + b;
  2. Import

    // We can import an entire module using,
    import 'module-1';
    // To import a specific function or a variable using named imports,
    import {add, sub} from 'module-1';
    // Use alias while importing,
    import {add as a, sub as s} from 'module-1';


Once again, these set of new features seem to be massively inspired from the Python language like,

  1. Default Arguments

    function add(a=0, b=0){
        return a + b;
  2. Indefinite Arguments

    function f1(...args){
        for (let arg of args) {
  3. Named Arguments

    function init({height=100, width=100}){


Prior to ES6, we implemented Classes by creating a constructor function and adding properties by extending the prototype. ES6 provides much needed syntactic sugar for doing this under the hood. We can create Classes directly,

class Person {
    constructor(name, age, gender) {
        this.name   = name;
        this.age    = age;
        this.gender = gender;
    incrementAge() {
        this.age += 1;

// Extend classes
class Personal extends Person {
    constructor(name, age, gender, occupation, hobby) {
        super(name, age, gender);
        this.occupation = occupation;
        this.hobby = hobby;
    incrementAge() {
        this.age += 20;


Maps is a dictionary-like data structure that holds key-value pairs. A typical Maps structure looks like this,

var map = new Map();

> map.set('foo', 'bar');
> map.get('foo');
> bar
> map.has('name');
> true

You can also iterate over maps like this,

for (var \[key, value\] of map.entries()) {
    console.log(key, value);

If these new features were enough to excite you for what ES6 has in store, then I would strongly recommend reading some of the following articles written by Nicolás Bevacqua,