Javascript ES6 Arrow functions

Arrow functions are a new ES6 syntax for writing JavaScript functions. They save developers time and simplify function scope. If you have worked with coffeescript jumping into using arrow functions won’t be that challenging.

What is an Arrow Function in ES6 and why should I care?

If you want to know why you should care, because Javascript has moved and it’s befitting as a new Javascript developer to know it too.
In this survey arrows have become popular among developers.

(http://www.2ality.com/2015/07/favorite-es6-features.html)

One interesting thing I’ve found with Arrow functions is the use of the “this” keyword. Arrow functions change the way “this” binds in functions.

With Arrow functions, you get to be very concise with your code. We can avoid the use of the “function” keyword, “return” keyword(just as in coffescript), and sometimes the curly brackets.

A Quick Look At the Big Arrow function

In the following examples I’d write the ES5 function we are used to and the equivalent ES6 Arrow function in return. Note: We’d be using ES6 let instead of var to declare variables with the ES6 functions.

Let get started.

Without parameters

// ES5
var returnHello = function returnHello() {
  return "Hello";
};
// ES6
let returnHello = () => {
  return "Hello"
}

So this looks like we’ve just ignored the “function” keyword, and adding the arrow “=>”

With parameters

// ES5
var returnHello = function returnHello(name) {
   return "Hello" + name;
};
// ES6 
let returnHello = (name) => {
   return "Hello" + name
}

Ignoring curly braces.

The above function in ES6 can be written without curly braces. That is only if one expression is present.

// ES5
var returnHello = function returnHello() {
  return "Hello";
};
// ES6
let returnHello = () => "Hello"

Object literals

// ES5 
var weather = function weather(temp, location) {
  return { temp: temp, location: location };
}
// ES6
let weather = (temp, location) => ({temp: temp, location: location})

Some things to know about working or returning object literals is that the literal needs to be wrapped in parentheses, in order to distinguish between a block and an object.

Arrow and “this”

If you’ve been doing ES5 for a while you’d be familiar in doing something like

var self = this

Arrow function allows you to retain the scope of the caller inside the function allowing you to forget about doing “var self = this”

Example

// ES5
API.prototype.get = function (resource) {
    var _this = this;
    return new Promise(function (resolve, reject) {
        fetch(_this.uri).then(function (res) {
            // do something
        });
    });
};
// ES6
API.prototype.get = function(resource) {
	return new Promise( (resolve, reject) => {
                fetch(this.uri).then( (res) => {
                    // do something
                })
      	});
};

So the next time you write

function returnsTrue(number) {
  return true;
}

you can just do this

let returnsTrue = () => true