ES6: A short guide to its JavaScript implementation – 2/2

This is the second part of my short tour of EcmaScript 6. You can find the first part covering let vs. var, arrow functions, string templates and destructuring arrays and objects in part 1 of the series.

This post will cover object literal property value shorthands, the spread operator, default arguments in functions and of course – ES6 classes.

object literal property value shorthand

shortcut party

In some random function you might want to return an object like this:

function doSomethingVeryUseful() {
    /* le code ... */
    return {
       result: result,
       error: error
    }
}

Using the new shorthand syntax you can now return the object like this:

function doSomethingVeryUseful() {
    /* le code ... */
    return {
       result,
       error
    }
}

If the property name and the variable name are equal, you can now omit the property name. But caution: obviously do not try to use any reserved words like function, var or let.

the spread operator

The spread operator allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected. – Mozilla Developer Network

For functions

So – what does this look like on code? Let’s imagine you want to call a function with multiple arguments given from a variable:

var myArguments = ['lorem', 'ipsum', 'dolor'];
doSomethingUseful.apply(null, myArguments);

With the spread operator ... you can now do it a little bit more readable like this:

var myArguments = ['lorem', 'ipsum', 'dolor'];
doSomethingUseful(...myArguments);

For arrays

You can use the spread operator for arrays, too. For example if you would want to merge two arrays:

var arrayOne = [1,2,3];
var arrayTwo = [3,4,5];

var mergedArray = arrayOne.concat(arrayTwo);

you can now write it like this:

var arrayOne = [1,2,3];
var arrayTwo = [3,4,5];

var mergedArray = [...arrayOne, ...arrayTwo];

// you could even add more values to the array
var mergedArrayPlus = [...arrayOne, ...arrayTwo, 6, 7, 8];

which is a lot cleaner.

default arguments in functions

Lets say you have a function and you want to give the opportunity to pass some optional arguments to the function. You probably implemented something like this:

function doSomethingUseful(lorem) {
    var lorem = typeof lorem !== 'undefined' ? lorem : 'defaultSetting';
    return doSomethingElse(option);
}

With ES6 you can now set a default value right in the function declaration:

function doSomethingUseful(lorem='defaultSetting') {
    return doSomethingElse(option);
}

ES6 Classes

EcmaScript6 provides a very easy way to define own classes and even extend a class from another class.

class Person {
    constructor(firstName, lastName, age) {
        // Object literal property value shorthand
        this.attributes = {firstName, age};
    }
    sayMyName() {
        console.log(this.attributes.firstName);
        console.log("You're god damn right.");
    }
}

var ww = new Person("Heisenberg", 53);
ww.sayMyName();

Heisenberg

Now let’s extend that class and add some extra functionality:

class Jessy extends Person {
    sayMyName() {
       super.sayMyName();
       console.log("Bitch!");
    }
}

var jp = new Jessy("Pinkman", 25);
jp.sayMyName();

yeah, bitch

Try it out on es6fiddle here!

A couple of things to note here:

  • Do not use the function keyword in method definitions. Just the method name followed by parenthesis.
  • You can call super() in the constructor or super().methodname in any method of an extended class

If you want to use ES6 today you can use a ES6 to ES5 compiler:

Happy coding!

Like what you read? – Donate

Leave a Reply

Your email address will not be published. Required fields are marked *