Arrow functions in JavaScript

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 use => for a compact syntax.
• They inherit this from the surrounding context.
• Single-expression functions have an implicit return.
• They don’t have access to the arguments object.
• Best to declare with const, unless reassignment is needed.

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

8

• '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.

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

gfg();

Hi from GeekforGeeks!

2. Arrow Function with Single Parameters

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

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

16

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.

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

gfg( 10, 20, 30 );

60

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.

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

gfg( 10, 20 );

10 20 30

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.

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

{ 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();
};

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.

Arrow Functions vs. Regular Functions

Arrow function in JavaScript

Visit Course

Arrow function in JavaScript

Arrow functions in JavaScript