Designer. Developer. Writer.

Hi. there..

I'm Pankaj Parashar, 26yo developer, designer and writer from India. I make things for the web and write about them on my blog here.

 • 

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
  1. String repetition
> var str = 'foo';
> console.log(str.repeat(2));
foofoo
  1. String templates
> var str1 = 'Foo';
> var str2 = 'Bar';

> console.log(`My name is ${str1} ${str2}.`);
My name is Foo Bar
  1. Multiline strings
> var str = (`Hello
World`);

> console.log(str);
Hello
World

Destructuring

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
  1. Destructuring objects
> var {foo, bar} = {'foo': 1; 'bar': 2};
> console.log(foo);
1

Modules

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;
}
  1. 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';

Arguments

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;
}
  1. Indefinite Arguments
function f1(...args){
    for (let arg of args) {
        console.log(arg);
    }
}
  1. Named Arguments
function init({height=100, width=100}){
    console.log(width);
}

Classes

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() {
        super.incrementAge();
        this.age += 20;
        console.log(this.age);
    }
}

Maps

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,

Did you enjoy reading this article? I'd love to hear your thoughts. Shoot me an email or send me a tweet if you've got any comments.

‹ Back to Home