RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/javascript/arrow-functions-in-javascript/ below:

Arrow functions in JavaScript - GeeksforGeeks

Arrow functions in JavaScript

Last Updated : 11 Jul, 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 Aspect Arrow Functions Regular Functions this Binding Lexically binds this to the surrounding context this is dynamically bound depending on how the function is called Syntax Shorter and more concise Requires the function keyword arguments Object

Does not have its own arguments object

Has its own arguments object Use as Constructor Cannot be used as a constructor Can be used as a constructor with new Method Definitions Cannot be used as methods within objects Can be used to define methods in objects Return Value Implicit return for single expressions Must use return keyword
Arrow function in JavaScript Arrow functions in JavaScript

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4