Pankaj
Parashar

Developer. Designer. Writer.

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

Elsewhere,
Twitter | Github | Codepen

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.

Published on Feb 04, 2016

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

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
    

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

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;
     }
    
  2. Indefinite Arguments

     function f1(...args){
         for (let arg of args) {
             console.log(arg);
         }
     }
    
  3. 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,

Previous
Atomize IO

Next
The Apple FBI saga