Arrow Functions in JavaScript

September 15, 2019

Arrow functions (also called “fat arrow functions”) are undoubtedly one of the more popular features of ES6. They introduced a new way of writing concise functions.

ES5

function timesTwo(params) {
  return params * 2
}
function timesTwo(params) {
  return params * 2
}

timesTwo(4) // 8
var timesTwo = (params) => params * 2

timesTwo(4) // 8

Introduction

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
}

The usual way to define JavaScript functions is using the function declaration or function expression:

// Function declaration
function greet(who) {
  return `Hello, ${who}!`
}

// Function expression
const greetExpression = function (who) {
  return `Hello, ${who}!`
}

But functions can be further improved. Making the syntax shorter (useful for writing short callbacks) and ease the resolving of this created a new type of functions named arrow functions.

👉 The central symbol of an arrow function is the fat arrow =>. On the left side enumerate the parameters (param1, param2, ..., paramN) and on the right side write the body { ... }.

(param1, param2, ..., paramN) => { ... }

Let’s define an arrow function to greet a person:

const greet = (who) => {
  return `Hello, ${who}!`
}

greet('Daniel Doe') // => 'Hello, Daniel Doe!'

greet is an arrow function. The symbol => delimits the parameters in parentheses (who) and the function body consisting of return Hello, ${who}!.

greet('Daniel Doe') is how you call an arrow function. There’s no difference between calling a regular function and an arrow function.

Up next