Arrow Functions in JavaScript
Arrow functions were introduced in ES6 / ECMAScript 2015 and provides a concise way to write functions in JavaScript.
Arrow Functions in JavaScript, JavaScript Arrow Function, Arrow function expressions, JavaScript: Arrow Functions for Beginners, arrow function example, arrow function typescript, arrow function in react js
Checkout more articles on ReactJS:
Benefits of arrow functions:
- Visually, An arrow function expression has a shorter syntax than a function expression.
- Unlike a regular function, an arrow function does not bind
this. Instead,thisis bound lexically (i.e.thiskeeps its meaning from its original context). - These function expressions are best suited for non-method functions and they cannot be used as constructors.
Here We have provided the syntax difference between the Normal function and Arrow function.
1 2 3 | function calculate() { //... } |
1 2 3 | const calculate = () => { //... } |
Way to write arrow functions in JavaScript
- No Parameters function
- Single Parameter function
- Multiple Parameter function
- Single line No Parameter function (Implicit return)
- Single line Single Parameter function (Implicit return)
- Single line Multiple Parameters function (Implicit return)
1. No Parameters function
If you don’t have any parameters in function and you want to use the arrow function then just use ().
1 2 3 4 5 6 7 8 9 | let getDefaultValue = () => { ... return { number: 50, base: 10 } } getDefaultValue(); // Output: { number: 50, base: 10 } |
2. Single Parameter function
If Method contains single parameter then you can directly write the parameter without having (). You can also use () as well.
1 2 3 4 5 6 7 8 9 | let getDefaultValue = number => { ... return { number: number, base: 10 } } getDefaultValue(20); // Output: { number: 20, base: 10 } |
3. Multiple Parameter function
If you have a method which contains multiple parameters then you can define function like below.
1 2 3 4 5 6 7 8 9 | let getDefaultValue = (number, base) => { ... return { number: number, base: base } } getDefaultValue(40, 20); // Output: { number: 40, base: 20 } |
4. Single line No Parameter function (Implicit return)
Arrow functions allow you to have an implicit return that means values are returned without having to use the return keyword. In other words, you can say single line function.
1 2 3 4 5 6 | let getDefaultValue = () => ({ number: 50, base: 10 }) getDefaultValue(); // Output: { number: 50, base: 10 } |
5. Single line Single Parameter function (Implicit return)
Same as above, if you have single parameter then you can write the function as below.
1 2 3 4 5 6 | let getDefaultValue = number => ({ number: number, base: 10 }) getDefaultValue(70); // Output: { number: 70, base: 10 } |
6. Single line Multiple Parameters function (Implicit return)
Let’s say if you have multiple parameters then your function should look like below.
1 2 3 4 5 6 | let getDefaultValue = (number, base) => ({ number: number, base: base }) getDefaultValue(80, 35); // Output: { number: 80, base: 35 } |
Here is another example for you.
1 2 3 | let calculate = (value1, value2) => value1 + value2 calculate(5, 7); // Output: 12 |
Thanks for reading and happy coding!
