The author selected the COVID-19 Relief Fund to receive a donation as part of the Write for DOnations program.

Introduction

The 2015 edition of the ECMAScript specification (ES6) added arrow function expressions to the JavaScript language. Arrow functions are a new way to write anonymous function expressions, and are similar to lambda functions in some other programming languages, such as Python.

Arrow functions differ from traditional functions in a number of ways, including the way their scope is determined and how their syntax is expressed. Because of this, arrow functions are particularly useful when passing a function as a parameter to a higher-order function, such as when you are looping over an array with built-in iterator methods. Their syntactic abbreviation can also allow you to improve the readability of your code.

In this article, you will review function declarations and expressions, learn about the differences between traditional function expressions and arrow function expressions, learn about lexical scope as it pertains to arrow functions, and explore some of the syntactic shorthand permitted with arrow functions.

Defining Functions

Before delving into the specifics of arrow function expressions, this tutorial will briefly review traditional JavaScript functions in order to better show the unique aspects of arrow functions later on.

The How To Define Functions in JavaScript tutorial earlier in this series introduced the concept of function declarations and function expressions. A function declaration is a named function written with the function keyword. Function declarations load into the execution context before any code runs. This is known as hoisting, meaning you can use the function before you declare it.

Here is an example of a sum function that returns the sum of two parameters:

function sum(a, b) {
  return a + b
}

Copy

You can execute the sum function before declaring the function due to hoisting:

sum(1, 2)

function sum(a, b) {
  return a + b
}

Copy

Running this code would give the following output:

Output
3

You can find the name of the function by logging the function itself:

console.log(sum)

Copy

This will return the function, along with its name:

Output
ƒ sum(a, b) {
  return a + b
}

A function expression is a function that is not pre-loaded into the execution context, and only runs when the code encounters it. Function expressions are usually assigned to a variable, and can be anonymous, meaning the function has no name.

In this example, write the same sum function as an anonymous function expression:

const sum = function (a, b) {
  return a + b
}

Copy

You’ve now assigned the anonymous function to the sum constant. Attempting to execute the function before it is declared will result in an error:

sum(1, 2)

const sum = function (a, b) {
  return a + b
}

Copy

Running this will give:

Output
Uncaught ReferenceError: Cannot access 'sum' before initialization

Also, note that the function does not have a named identifier. To illustrate this, write the same anonymous function assigned to sum, then log sum to the console:

const sum = function (a, b) {
  return a + b
}

console.log(sum)

Copy

This will show you the following:

Output
ƒ (a, b) {
  return a + b
}

The value of sum is an anonymous function, not a named function.

You can name function expressions written with the function keyword, but this is not popular in practice. One reason you might want to name a function expression is to make error stack traces easier to debug.

Consider the following function, which uses an [if](https://www.digitalocean.com/community/tutorials/how-to-write-conditional-statements-in-javascript) statement to throw an error if the function parameters are missing:

const sum = function namedSumFunction(a, b) {
  if (!a || !b) throw new Error('Parameters are required.')

  return a + b
}

sum();

Copy

The highlighted section gives the function a name, and then the function uses the or || operator to throw an error object if either of the parameters is missing.

Running this code will give you the following:

Output

Uncaught Error: Parameters are required.
    at namedSumFunction (<anonymous>:3:23)
    at <anonymous>:1:1

In this case, naming the function gives you a quick idea of where the error is.

An arrow function expression is an anonymous function expression written with the “fat arrow” syntax (=>).

Rewrite the sum function with arrow function syntax:

const sum = (a, b) => {
  return a + b
}

Copy

Like traditional function expressions, arrow functions are not hoisted, and so you cannot call them before you declare them. They are also always anonymous—there is no way to name an arrow function. In the next section, you will explore more of the syntactical and practical differences between arrow functions and traditional functions.

Arrow Function Behavior and Syntax

Arrow functions have a few important distinctions in how they work that distinguish them from traditional functions, as well as a few syntactic enhancements. The biggest functional differences are that arrow functions do not have their own this binding or prototype and cannot be used as a constructor. Arrow functions can also be written as a more compact alternative to traditional functions, as they grant the ability to omit parentheses around parameters and add the concept of a concise function body with implicit return.

In this section, you will go through examples that illustrate each of these cases.

#wordpress