ES2015 Functions

ES2015 has some improvements for functions including the lexical this, implicit return and more. All in a short syntax, so let’s use new ES2015 syntax for functions.

Previous Episode

In the previous episode ES2015 Classes we saw how to use new ES2015 syntax for classes and now it’s time to see functions.

We also saw that modern browsers will implement ES2015 specification very soon, such as chrome (most of features released already). Also remember that you can always compile your ES2015 code to work with current/old browsers using ES5.

ES5 Anonymous Functions

var log = function(msg){ console.log('=> '+msg); };
log('Hello');
//=> Hello

ES5 Named Functions

function log(msg){ console.log('=> '+msg); };
log('Hello');
//=> Hello

ES2015 Class Functions

ES2015 has a new syntax for functions that resides inside classes (also new on ES2015).

class Car {
  constructor(color) {
    this.color = color;
  }
  park(garage){
    console.log('Parking the ' + this.color + ' car in ' + garage + '.');
  }
}

var car = new Car('red');
car.park('garage building 1st floor');
//=> Parking the red car in garage building 1st floor.

ES2015 Arrow Function

Arrow functions => are a really nice shorthand syntax for anonymous functions. It also comes with with the lexical this, in other words this inside the function will be the same as outside the function.

var log = msg => { console.log('=> '+msg); };
log('Hello');
//=> Hello

Wrap function arguments into parenthesis () if you have more than one:

var log = (user, msg) => { console.log('=> '+user+' said:'+msg); };
log('Bob', 'Hello');
//=> Bob said:Hello

If you need to return a value from the arrow function you can remove the curly brackets {}:

var sum = (a, b) => a + b;
sum(16, 38);
//=> 54

Finally here’s an example to show the lexical this in action:

var obj = {
  es5: function(){
    ['a'].map(function(){ console.log(this); });
  },
  es2015: function(){
    ['a'].map(() => { console.log(this); });
  }
};
obj.es5();
//=> Window {...}

obj.es2015();
//=> Object {}

As you see the this for ES2015 arrow function shares the context with the outside function. That’s usually the same as we see with that = this; switch, a very often used technique.

Conclusion

The new ES2015 Function syntax is amazing. Super short to type and faster to read. We don’t need function and return for most of cases. Additionally the lexical this is a simple way to use this variable in a reliable way, you know what you’ll find there.