ES6 Arrow Functions In JavaScript

In this post I will cover ES6 arrow functions and using default parameters. There is a link to a free video of this post at the bottom.

Function Expressions

A function expression describes when a function is stored inside a variable. We can declare a named function expression where the function has a name but usually a function expression does not have a name so we refer to this as an anonymous function. Anonymous functions are especially useful when we only want to pass the function as an argument to another function. The reason behind why this is possible is because functions are objects in JavaScript. When you invoke or call a function expression you use the variable name not the function name. When you use a function expression the JavaScript interpreter will not do anything with the function until it gets to the line where the function is initialised. Let’s look at an example of a couple of function expressions.


const myFavouriteGame = function(game) {
  return `My favourite game is: ${game}.`
};
myFavouriteGame("Monopoly");
//Returns ---> 'My favourite game is: Monopoly.'

The above example declares a variable called myFavouriteGame which is initialised with an anonymous function. The function takes the parameter game. Inside the function body, using a template literal, a string with the value of game is returned.

Arrow functions

Es6 introduced the arrow function syntax which meant we can omit the keyword function. Below is a repeat of the above example but this time using an arrow function.

const myFavouriteGame = (game) => {
  return `My favourite game is: ${game}.`
};
myFavouriteGame("Monopoly");
//Returns ---> 'My favourite game is: Monopoly.'

Single line arrow functions

If we only need to return a value from the function we can simplify this further and omit the curly braces and the keyword return so we are only using a single line statement. Below is the same example as above but this time using a single line arrow function.

const myFavouriteGame = (game) => `My favourite game is: ${game}.`;
myFavouriteGame("Monopoly");
//Returns ---> 'My favourite game is: Monopoly.'

Arrow function parameters

We are passing the string Monopoly as the argument to the function for the parameter game. The arrow function lets us simplify the function further if we are only using one parameter. If this is the case we can omit the parentheses around the parameter as is shown in the example below. Note though that this is only possible when only one parameter is used. If more than one parameters are used parentheses must be used.

const myFavouriteGame = game => `My favourite game is: ${game}.`;
myFavouriteGame("Monopoly");
//Returns ---> 'My favourite game is: Monopoly.'

Default parameters

ES6 also introduced default parameters. These allow us to set a default value when we use a parameter in case no argument is given when the function is invoked and would otherwise be undefined. The first example below shows what would happen if we did not use a default parameter and we get undefined as the return value.

const myFavouriteGame = game => `My favourite game is: ${game}.`;
myFavouriteGame();
//Returns ---> 'My favourite game is: undefined.'

Next let’s look at the same example but this time we will set the default parameter in the function. Note that this requires us to use parentheses, if we do not do this we will get a syntax error.

const myFavouriteGame = (game = "Monopoly") => `My favourite game is: ${game}.`;
myFavouriteGame();
//Returns ---> 'My favourite game is: Monopoly.'

Lastly lets look at the same example but this time we will pass in an argument when the function is invoked.

const myFavouriteGame = (game = "Monopoly") => `My favourite game is: ${game}.`;
myFavouriteGame("Chess");
//Returns --> 'My favourite game is: Chess.'

Rest parameter

If we want to create a function that uses any number of arguments then we can use the rest parameter. The rest comprises of three dots (…). The arguments which are passed into the function get stored inside an array and this array can be accessed from within the function body.

const myFavouriteGames = (...games) => `We have ${games.length} games`;
myFavouriteGames("Monopoly", "Chess");
//Returns ---> 'We have 2 games'

The example above amends the previous example and uses the rest parameter and an array called games. When we invoke the function we pass in two arguments, Monopoly and Chess. Inside the function we have changed the string to return the length of the games array. As we are passing in two arguments the string returned states that we have two games.

I hope you enjoyed this article I have a video of the article here.