While writing my blog on JavaScript Promises there I use arrow function a lot. So i thought why not to explain what is Arrow function and why most developers use this.
Blog on JavaScript Promises π
Topics to Cover
- What arrow functions are
- Basic arrow function syntax
- Arrow functions with one parameter
- Arrow functions with multiple parameters
- Implicit return vs explicit return
- Basic difference between arrow function and normal function
Arrow Functions
Arrow function are introduce in ES6 version of the language. So to learn about Arrow function lets first start from the standard way of writing Function (the old way) .
Lets make a Function that adds two numbers
function add(a, b) {
return a + b;
}
console.log(`1 + 2 is`, add(1, 2));
The above code return something like
1 + 2 is 3
Code executed with no errors right ? So why we need to introduce arrow function. Lets understand first
π The Arrow Function Syntax
An Arrow function consist of :
Changing an anonymous function to an arrow function is very easy. You just replace the function keyword.
function () {}
with this => arrow
() => {}
Lets take the example add() function from the previous section can be written as an arrow function :
const add = (a , b) => {
return a + b
}
console.log("1 + 2 is" , add(1, 2))
Now , we understand the basic arrow function with syntax lets see how it works when the function has one or multiple parameter.
Handling Parameters in Arrow Functions
In arrow functions parameter work almost same as in normal function. The only difference is come only when there is one parameter
Lets see one by one
1. Arrow functions with no parameter
If a function does not take any parameters, we write an empty argument list (), just like in normal functions.
const func = () => {
return "Like this blog"
}
console.log(func())
Since the function returns only one value, we can also write it in a shorter way:
const func = () => "Like this blog"
console.log(func())
Above , an arrow function that take no arguments and return the string "Like this blog"
2. Arrow functions with one parameter
If the function has one parameter that what create the difference between a normal function and arrow function. Lets see
const squareNums = nums => num * num
console.log("Square of 2 is" , squareNums(2))
Yes , you guessed it right
If an arrow function has only one parameter the parenthesis around the parameter are optional.
3. Arrow functions with multiple parameters
An arrow function can also take multiple parameters. lets understand it from example
let sum = 0;
const calculateMarks = (maths, english, science) => {
return (sum += maths + english + science);
};
console.log("total marks out of 300 is :- ", calculateMarks( 80, 90, 95));
Please do it on your own JavaScript console to understand the behavior of arrow functions.
Implicit return vs explicit return
Now , we have understand how to handle parameter inside arrow function. But how we know which parameter returns what.
As we have saw when we have one parameter we don't apply curly brackets {} , but still it return the functions. Let understand how it works
1. Implicit return
Implicit return in arrow function occurs when the function body is a single expression ( without curly brackets {} ).
In this the expression inside the function is automatically return
const add = (a , b) => a + b
2. Explicit return
Explicit return in arrow function occurs when the function body has multiple expression with curly brackets {}
In this you must use the return keyword to specified the value to be return .
const add = (a,b) => { return a + b}
No curly brackets = Implicit return
Curly bracket = Explicit return
Now let see what the key difference between arrow function and normal function
Difference between arrow function and normal function
| Feature | Normal Function | Arrow Function |
|---|---|---|
| Syntax | Uses the function keyword |
Uses the => arrow syntax |
| Parameters | Parentheses are always required | Parentheses optional for one parameter |
| Return | Must use return keyword |
Can use implicit return for single expressions |
| this keyword | Has its own this context |
Inherits this from the surrounding scope |
| Usage | Common in traditional JS code | Common in modern ES6+ JavaScript |
Thanks for reading ! if enjoyed this blog , you can read more on this π
Top comments (0)