Pankaj ParasharDesigner. Developer. Writer.
Feb 04, 2016

ES6 - 101

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

{% highlight js %}

var str1 = ‘Foo’; var str2 = ‘Bar’;

console.log(My name is ${str1} ${str2}.); My name is Foo Bar {% endhighlight %}

  1. Multiline strings

{% highlight js %}

var str = (Hello World);

console.log(str); Hello World {% endhighlight %}

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

{% highlight js %}

var [a, b, c, d] = [1, 2, 3, 4]; console.log(a); 1 {% endhighlight %}

  1. Destructuring objects

{% highlight js %}

var {foo, bar} = {‘foo’: 1; ‘bar’: 2}; console.log(foo); 1 {% endhighlight %}

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.,

{% highlight js %} / 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; } {% endhighlight %}

  1. Import

{% highlight js %} // 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’; {% endhighlight %}

Arguments

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

  1. Default Arguments

{% highlight js %} function add(a=0, b=0){ return a + b; } {% endhighlight %}

  1. Indefinite Arguments

{% highlight js %} function f1(…args){ for (let arg of args) { console.log(arg); } } {% endhighlight %}

  1. Named Arguments

{% highlight js %} function init({height=100, width=100}){ console.log(width); } {% endhighlight %}

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,

{% highlight js %} 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);
}

} {% endhighlight %}

Maps

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

{% highlight js %} var map = new Map();

map.set(‘foo’, ‘bar’); map.get(‘foo’); bar map.has(‘name’); true {% endhighlight %}

You can also iterate over maps like this,

{% highlight js %} for (var [key, value] of map.entries()) { console.log(key, value); } {% endhighlight %}

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,