Arrow Function in Javascript
Anonymous function – An anonymous function is a function without a name. It can be defined using the function keyword without providing a function name. It also has multiple arguments, but only one expression.
common ways to create anonymous functions:
1. Function Expression:
const hello = function () {
console.log("hello world")
}
hello();
// Output - hello world
Here, hello is a variable that holds an anonymous function. This function does not take any parameter and, when invoked using ‘ hello(); ’, it gives output hello world to the console.
We can also pass arguments to the anonymous function.
const add = function (a, b) {
console.log(a + b);
}
add(20, 20);
// Output - 40
This function is stored in the add variable. It takes two parameters (a , b) , adds them together and gives output 40 to the console.
2. Immediately Invoked Function Expression (IIFE)
You can use it to make a function and then call it right away.
(function () {
console.log("This is an IIFE");
})();
//Output - This is an IIFE
It doesn’t take any parameters, but you can include parameters if needed. The purpose of the IIFE is often to create a private scope for variables, preventing them from the global scope.
3. setTimeout method( )
When using ‘setTimeout’ with an anonymous function, you provide the function as the first argument and the delay as the second argument.
setTimeout(function(){
console.log("hello world")
}, 2000)
// output - hello world
This is an anonymous function that will be executed after the specified delay. After 2000 milliseconds or (2 seconds) , it gives output hello world to the console.
4. Arrow function ( )
It is the shorter way of declaring an anonymous function and does not require the function keyword and uses an arrow (=>) to separate the parameters from the body. They are also called lambda functions.
const hellofunction = (arg1, arg2, ... argN) => {
// statements
}
→ hellofunction is the name of the function.
→ arg1, arg2, … argN are the function arguments.
→ statements are the function body.
There are some examples of arrow function in javascript:
1. Arrow Function without Parameters – If an arrow function does not take any parameter, you still need to use parentheses, but they will be empty.
let hello = () => console.log("world");
hello();
//Output - world
2. Arrow Function with Parameter – If an arrow function takes a single parameter, you can omit the parentheses.
let hello = x =>{
console.log(x);
}
hello("world");
// Output - world
Here, x is a parameter.
→ If an arrow function takes more than one parameter.
let hello = (x,y) =>{
console.log(x+y);
}
hello(10,20);
// Output - 30
Here, x and y is a parameter
3. Arrow Function with Default Parameter – The function allows the initialization of parameters with default values.
let hello = (x,y=200) =>{
console.log(x + y)
}
hello (200);
// Output - 400
Here, an arrow function named hello that takes two parameters x and y. The parameter ‘y’ has a default value of 200.
4. Arrow Function with Rest Parameters – It allows you to collect all the remaining arguments into a single array.
let hello = (a, …arg2) => {
console.log(a + “ “ + arg2)
}
hello(200, 400, 600,800, 1000);
// Output - 200 400,600,800,1000
Here, the hello function takes 200 as the first argument ‘a’ and the rest of the arguments are captured in the ‘arg2’ array using the rest parameter. The console.log statement then outputs the string concatenation of ‘a’ and the array elements in ‘arg2’.
5. Arrow Function as an expression – It allows you to create a function and use it as an expression.
let age = 10;
let voting= (age < 18) ?
() => console.log('not eligible for vote') :
() => console.log('eligible for vote');
voting();
// Output - not eligible for vote
Here, the value of age is 10, the condition (age > 18) is true and the first arrow function is assigned to voting resulting in the output “not eligible for voting” when the voting function is invoked.
Additional Read:
Topic: Lexical scope in Javascript
