Arrow functions in JavaScript (original) (raw)

Last Updated : 17 May, 2025

An arrow function is a shorter syntax for writing functions in JavaScript. Introduced in ES6, arrow functions allow for a more concise and readable code, especially in cases of small functions. Unlike regular functions, arrow functions don't have their own this, but instead, inherit it from the surrounding context.

• Arrow functions are written with the => symbol, which makes them compact.
• They don't have their own this. They inherit this from the surrounding context.
• For functions with a single expression, the return is implicit, making the code more concise.
• Arrow functions do not have access to the arguments object, which is available in regular functions.
• Like any variable, an arrow function can be declared using const, var or let. However it is a best practice to use const with arrow function unless we have a strong reason to reassign them, JavaScript `

const add = (a, b) => a + b; console.log(add(5, 3));

`

• ****'add'** is an arrow function that takes two parameters a and b, and returns their sum.
• The arrow function's concise syntax eliminates the need for the function keyword and curly braces for single-line expressions.

**1. Arrow Function without Parameters

An arrow function without parameters is defined using empty parentheses (). This is useful when you need a function that doesn’t require any arguments.

JavaScript `

const gfg = () => { console.log( "Hi from GeekforGeeks!" ); }

gfg();

`

Output

Hi from GeekforGeeks!

2. Arrow Function with Single Parameters

If your arrow function has a single parameter, you can omit the parentheses around it.

JavaScript `

const square = x => x*x; console.log(square(4));

`

**3. Arrow Function with Multiple Parameters

Arrow functions with multiple parameters, like ****(param1, param2) => { }**, simplify writing concise function expressions in JavaScript, useful for functions requiring more than one argument.

JavaScript `

const gfg = ( x, y, z ) => { console.log( x + y + z ) }

gfg( 10, 20, 30 );

`

**4. Arrow Function with Default Parameters

Arrow functions support default parameters, allowing predefined values if no argument is passed, making JavaScript function definitions more flexible and concise.

JavaScript `

const gfg = ( x, y, z = 30 ) => { console.log( x + " " + y + " " + z); }

gfg( 10, 20 );

`

5. Return Object Literals

In JavaScript, returning object literals within functions is concise: ****() => ({ key: value })** returns an object { key: value }, useful for immediate object creation and returning.

JavaScript `

const makePerson = (firstName, lastName) => ({first: firstName, last: lastName}); console.log(makePerson("Pankaj", "Bind"));

`

Output

{ first: 'Pankaj', last: 'Bind' }

Async Arrow Functions

Arrow functions can be made asynchronous by adding the async keyword before the parameter list.

const fetchData = async () => {
const data = await fetch('https://api.example.com/data');
return data.json();
};

**Advantages of Arrow Functions

• **Concise Syntax: Arrow functions reduce the amount of code needed for function expressions.
• **Lexical **this **Binding: Arrow functions automatically bind this to the surrounding context, eliminating common issues when dealing with callbacks.
• **Improved Readability: For shorter functions, arrow syntax can make your code more readable.

**Limitations of Arrow Functions

• **No prototype Property: Arrow functions do not have the prototype property, so they cannot be used as constructors.
• Cannot be Used with **new**:** Since they lack a prototype, they cannot be used with the new keyword to create instances.
• **Cannot be Generators: Arrow functions cannot be used as generator functions (function*) because they do not support the yield keyword.
• **Anonymous Nature: Debugging can be harder because arrow functions are anonymous by default.
• **No Own this, arguments, super, or new.target: Arrow functions do not have their own bindings for these properties, which can limit their use in some cases.

Best Practices for Using Arrow Functions

• Use arrow functions for callbacks and array methods to improve readability.
• Avoid arrow functions in object methods if this needs to refer to the object itself.
• Prefer arrow functions in functional programming patterns for their concise syntax.
• Use rest parameters for variadic functions when arguments are needed.

When to Use - Arrow Functions vs. Regular Functions