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));
Output
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();
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.
const square = x => x*x;
console.log(square(4));
Output
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 );
Output
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 );
Output
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"));
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();
};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
| 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
