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
}

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

sum(1, 2)

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

Running this code would give the following output:

3

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

console.log(sum)

This will return the function, along with its name:

ƒ 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
}

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
}

Running this will give:

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)

This will show you the following:

ƒ (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()

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.

#javascript #fundamentals #function