Hello guys today i am discussing about Arrow functions in javascript or we can say in ES6.
Arrow function -
- Arrow functions are introduced in ES6, which provides you a more accurate way to write the functions in JavaScript. They allow us to write smaller function syntax. Arrow functions make your code more readable and structured.
- Arrow functions are anonymous functions (the functions without a name and not bound with an identifier).
- They can be declare without the function keyword.
- Arrow functions cannot be used as the constructors.
- They are also called as Lambda Functions in different languages.
syntax -
const functionName = (arg1, arg2, ?..) => {
//body of the function
}
Example 1 - Normal function
//Normal function
function display(){
console.log("This is a normal function");
}
display();
//Arrow function
const display = () => {
console.log("This is an Arrow function");
}
display();
Output -
This is a norml function
This is an Arrow function
- "=>" , it is called fat-arrow notation or lambda notation.
- "()" , inside this braces we can pass parameters
- Then we got the body of the function inside curly braces "{}".
- Then we called it like a normal function using its variable name.
Example 2 - Parameterised Function
//With parameters
const Factorial = (num) =>{
let fact = 1;
for(let i=1;i<=num;i++){
fact *= i;
}
console.log(fact);
}
Factorial(5);
Output -
120
- We have created an arrow function named Factorial and inside the braces "(num)", we have passed the "num" parameter , which is the number used to calculate the factorial, then inside the function body we have wrote the factorial logic and in the end we called the Factorial function which produces the output.
Example 3 - Single line functions
//single line statement functions dont need curly braces
//it is optional to put curly braces for it
const single = (a,b) => return a + b;
single(10,15);
Output-
25
Example 4 - Rest parameters
//With rest parameters
const restPararmeter = (...args) => {
let sum = 0;
for(let i of args){
sum += i;
}
console.log(sum);
}
restPararmeter(1,2,3,4,5,6,7,8,9,10);
Output -
55
- Rest parameters "..." denoted by three dots, do not restrict you to pass the number of values in a function, but all the passed values must be of the same type.
- Here we have passed 10 numbers in the arguments while calling our function and then summed up all the numbers and output the result.
- You can see we have used the rest operator in the function parameter and didn't create 10 different parameter for 10 numbers to pass.
As we have seen, the arrow function makes the writing of function less complicated, and it also reduces the number of lines.
Thats it for this post.
THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION , PLEASE MENTION IT IN THE COMMENT SECTION.
^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--
Top comments (5)
They don't return any value??? Yes, they do. They return values in the same way a regular function does, and also have an extra way - an implicit return:
Thanks for the correction 🍻
Couple points that you should note about arrow functions in Javascript:
As mentioned by others, you don't need the /return/ keyword in a single line function
Another point about arrows which you should look into for the future is the fact that arrows handle the /this/ keyword differently than regular functions. Arrow functions inherit /this/ from the scope that called them, rather than rebinding it. This can cause some funky behaviour when using them as methods on an object (this will point to whatever object initiated the method, not the object the method belongs to), so I would be careful using them in objects.
I forgot about the this keyword binding
Thank you for the correction 🍻
Thanks for the correction ❣️