Skip to main content

Arrow Function in JavaScript

JavaScript arrow functions are a concise way to write functions in JavaScript. They were introduced in ECMAScript 6 and provide a shorthand syntax for writing function expressions.

The basic syntax of an arrow function is:

(parameters) => { statement }

Here:

  • The parameters is a comma-separated list of function parameters, and statement is the code to be executed when the function is called.
  • If the statement consists of a single expression, you can omit the curly braces and return keyword, like so:
(parameters) => expression

For example:

Here is a traditional function that takes two parameters and returns their sum:

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

The equivalent arrow function would look like this:

const sum = (a, b) => a + b;

Arrow functions are useful for writing concise code, especially when working with arrays or higher-order functions like map(), filter(), and reduce().

Here's an example of using an arrow function with map():

const numbers = [1, 2, 3, 4, 5];

const squaredNumbers = numbers.map(num => num * num);

console.log(squaredNumbers); // [1, 4, 9, 16, 25]

In this example:

  • The arrow function takes a single parameter num and returns the square of that number.
  • The map() function then applies this function to each element in the numbers array and returns a new array containing the squared numbers.

Why Arrow Function​

Arrow functions in JavaScript have a few advantages over traditional function expressions:

Concise syntax​

Arrow functions provide a concise syntax for writing function expressions. This makes your code more readable and easier to understand, especially when working with arrays or higher-order functions.

Lexical this binding​

Arrow functions do not have their own this binding. Instead, they inherit the this value from the surrounding code. This makes it easier to use this in object methods or event handlers, where the meaning of this can be ambiguous.

Implicit return​

If an arrow function consists of a single expression, you can omit the curly braces and the return keyword. This makes your code even more concise and easier to read.

No binding of arguments​

Arrow functions do not bind their own arguments object. Instead, you can use the rest parameters syntax to capture all arguments passed to the function.

Easy to use with higher-order functions​

Arrow functions are particularly useful when working with higher-order functions like map(), filter(), and reduce(). They provide a concise way to define a function to be applied to each element of an array.