Arrow Functions => Explained

Arrow functions were introduced in ES6, and have made coding in JS more concise, but also confusing to those who may be coming from backgrounds outside of JS.

Let's take a look at a normal function:

function hello(){
    return "Hello World!";
}

//call signature
hello();

//returns 
"Hello World!"

That is what most people are familiar with, and the style is similar to most objected oriented languages. However, we can write it a bit differently:

const hello = function() {
    return "Hello World!";
}

//call signature
hello();

//returns
"Hello World!"

Above, we set the hello variable to be equal to a function. That means that we can call the hello variable like a function as shown above. Now, you might be saying "Hey, none of these have any arrows in them!" and yes, you're correct. However, understanding how we can write those functions will be easier to understand this arrow function syntax.

const hello = () => {
    return "Hello World!";
}

//call signature
hello();

//returns
"Hello World!"

Now this is our first arrow function that we have written so far. You can see it's called the same way as all of the other ones as well. You can see how rather than writing function() { we have written () => { so you can see that the function keyword is no longer needed, because the arrow takes care of that syntax.

Sure, we have looked at some basic functions, now let's look at passing in parameters. In ES5, we would have written something like this:

var multiplyNumbers = function(x,y) {
    return x * y;
}

In ES6, with the use of arrow functions, we can write something even more concise!

const multiplyNumbers = (x,y) => { return x * y; }

These two functions will return the exact same things, but you can see that one of the functions is only one line. This makes it easy to read and saves from developer fatigue. Now, what if I told you we can reduce the above function to a more concise expression?

const multiplyNumbers = (x,y) => x * y;

Notice that we don't have any curly braces this time. Some people like this syntax and others don't because it's not as explicit. This is where coding styles come into play! In the above example, the reason that we can do without curly braces is because we only have one expression. The return statement here is implicit, and the compiler knows that because we only have one expression, that's what our returned result should be. Now that we have looked at two parameters, let's look at one parameter.

//ES5 
var squareNumber = function(x) {
    return x * x;
}

//ES6
const squareNumber = x => x * x;

Here you can see that the syntax is extremely similar, but that we don't have to include parenthesis around our parameters when we only have one. Now that we have looked at one parameter, let's look at no parameters. When we have no parameters, parenthesis are required.

//ES5
hello = function() {
    return "Hello World!";
}

//ES6
hello = () => {
    return "Hello World!";
}

Using the example from earlier, we can see that we must have parenthesis to show that this will be a function. Now that we have gone over the common ways to write arrow functions, let's look at some use cases that make our lives easier.

Let's say we had an array of objects like so:

const energyDrinks = [
    { name: 'Coffee', caffeine: 95},
    { name: 'Monster', caffeine: 86},
    { name: 'Red Bull', caffeine: 110},
    { name: 'bang', caffeine: 300},
];

And now that we have these objects, let's say we only wanted the caffeine content in each of them, so we could take the average of them later, or maybe do another calculation. So to do this:

//ES5
var caffeineContent = energyDrinks.map(function(energyDrink) {
    return energyDrink.caffeine;
}
//returns [95, 86, 110, 300]

//ES6
const caffeineContent = energyDrinks.map(energyDrink => energyDrink.caffeine);
//returns [95, 86, 110, 300]

Notice how both of these functions accomplish the same thing, but one is a lot more concise? That is why developers love arrow functions. Just remember not to go crazy, and only use them when you really need them.