Arrow functions in JavaScript
What is Arrow Function ?
Arrow function {()=>} is concise way of writing JavaScript functions in shorter way. Arrow functions were introduced in the ES6 version. They make our code more structured and readable.
Arrow functions are anonymous functions i.e. functions without a name but they are often assigned to any variable. They are also called Lambda Functions.
Syntax:
const gfg = () => {
console.log( "Hi Geek!" );
}
The below examples show the working of the Arrow functions in JavaScript.
Arrow Function without Parameters
const gfg = () => {
console.log( "Hi from GeekforBeginner!" );
}
gfg();
Output
Hi from GeekforBeginner!
Arrow Function with Parameters
const gfg = ( x, y, z ) => {
console.log( x + y + z )
}
gfg( 10, 20, 30 );
Output
60
Arrow Function with Default Parameters
const gfg = ( x, y, z = 30 ) => {
console.log( x + " " + y + " " + z);
}
gfg( 10, 20 );
Output
10 20 30
Arrow functions can be async by prefixing the expression with the async keyword.
async param => expression
async (param1, param2, ...paramN) => {
statements
}
Advantages of Arrow Functions
- Arrow functions reduce the size of the code.
- The return statement and function brackets are optional for single-line functions.
- It increases the readability of the code.
- Arrow functions provide a lexical this binding. It means, they inherit the value of “this” from the enclosing scope. This feature can be advantageous when dealing with event listeners or callback functions where the value of “this” can be uncertain.
Limitations of Arrow Functions
- Arrow functions do not have the prototype property.
- Arrow functions cannot be used with the new keyword.
- Arrow functions cannot be used as constructors.
- These functions are anonymous and it is hard to debug the code.
- Arrow functions cannot be used as generator functions that use the yield keyword to return multiple values over time.
Supported Browsers
- Chrome 45 and above
- Edge 12 and above
- Firefox 22 and above
- Opera 32 and above
- Safari 10 and above