JavaScript Arrow Functions

Arrow Functions allow a shorter syntax for function expressions.

You can skip the function keyword, the return keyword, and the curly brackets:

const multiply = (a, b) => a * b;

Try it Yourself

Arrow Functions were introduced in ES6 and are commonly used in modern JavaScript.

Share

Arrow Function Syntax

An arrow function uses the => symbol.

An arrow function is always written as a function expression.

Example

const add = (a, b) => {

      return a + b;

    };

This arrow function does the same thing as a regular function expression.

Shorter Syntax

If the function body contains only one statement:

You can remove the word function, the curly brackets and the return keyword.

Before Arrow

const multiply = function(a, b) {return a * b}

With Arrow

const multiply = (a, b) => a * b;

With Arrow

const hello = () => "Hello World!";

Before Arrow

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

Arrow Functions with One Parameter

If a function has only one parameter, you can omit the parentheses:

With Parentheses

const square = (x) => x * x;

With Parentheses

const hello = (val) => "Hello " + val;

Arrow Functions Return Value by Default

If the function has only one statement that returns a value:

You can remove the brackets and the return keyword:

Example

const hello = () => "Hello World!";

Arrow Function Parameters

If you have parameters, you pass them inside the parentheses:

Example

const hello = (val) => "Hello " + val;

If you have only one parameter, you can skip the parentheses as well:

Example

const hello = val => "Hello " + val;

Arrow Functions with No Parameters

If there are no parameters, parentheses are required.

With Arrow Function:

const hello = () => "Hello World!";

You can only omit the return keyword and the curly brackets if the function is a single statement. Because of this, it might be a good habit to always keep them:

Example

// This will return undefined

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

// This will return undefined

const myFunction = (x, y) =>  return x * y;

// This will return the expected result

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

Arrow Functions Are Not Declarations

Arrow functions are always expressions and must be assigned to a variable.

They cannot be used before they are defined.

Example

hello(); // Error

const hello = () => "Hello";

Arrow Functions and the this Keyword

Arrow functions do not have their own this value.

They inherit this from the surrounding code.

Example

const person = {

      name: "John",

      greet: function() {

        return this.name;

      }

    };

Using an arrow function as a method often gives unexpected results.

Example

const person = {

      name: "John",

      greet: () => {

        return this.name;

      }

    };

In this case, this does not refer to the person object.

When to Use Arrow Functions

• For short functions
• For callbacks and array methods
• When you do not need your own this

When Not to Use Arrow Functions

• As object methods
• When you need your own this
• When using function declarations

Common Mistakes

• ### Forgetting Parentheses Rules Parentheses are required for zero or multiple parameters.
• ### Using Arrow Functions as Methods Arrow functions do not bind this.
• ### Expecting Hoisting Arrow functions are not hoisted.