Arrow Functions in JavaScript
Arrow functions weren't always there in JavaScript, they were introduced in 2015 in ES6. They are concise methods to write function expressions. It can be said that this is a shorter and a cleaner way to present your code.
Normal function syntax:
functionKeyword functionName (parameters){
//code;
};
Eg. function add(a,b){
return a + b;
};
Arrow function syntax:
const functionName = (parameters) => {
//code;
};
Eg. const add = (a,b) => {
return a + b;
};
Arrow functions with one parameter
When a function has only one parameter, we can omit the parentheses.
With parenthesis:
const square = (a) => {
return a*a;
};
Without parenthesis:
const square = a => a*a;
Arrow functions with multiple parameters
When there are multiple parameters, parentheses are required.
const multiply = (a, b) => {
return a*b;
};
Arrow functions with no parameters
In this case also parentheses are required.
const hello = ( ) => "hello world" ;
You can skip the return keyword and the curly brackets. But they can be written with them too!
const greet = ( ) => {
return "hello world";
};
Implicit return vs explicit return
An explicit return uses the return keyword to specify the value that needs to be returned and requires the function to be enclosed inside curly brackets. It can be called the traditional way to return a value from a function.
Eg. const add = (a, b) => {
return a+b;
};
An implicit return is available only in arrow functions when there are no curly brackets involved.
Eg. const add = (a, b) => a+b;
If a function with curly braces does not have a return statement, it will return undefined by default.
** When we write an arrow function:
const obj = () => {name : "ansh"};
we might think that it will return { name: "ansh} but actually it returns undefined. It is because JavaScript thinks {} is a function body and not an object. To fix this, wrap the object in ( ).
Eg. const goodObj = ( ) => ({name : "ansh"});
Now {name : "ansh"} will be returned.
Basic difference between arrow function and normal function
| Feature | Normal Function | Arrow Function |
|---|---|---|
| Syntax length | longer | shorter |
| Readability | expansive | cleaner |
| Modern JS | traditional style | introduced in ES6 |
Assignment
- Square of a number using normal function:
function square (a) {
return a*a;
};
- Writing it using arrow function:
const square = a => a*a;
- Arrow function that returns whether a number is even or odd:
const isEven = a => (a % 2 === 0 ? "even" : "odd");
console.log (isEven(4));
console.log(isEven(9));
The output for the 1st is going to be even and odd for the second one.
- Arrow function inside map() on an array:
const numbers = [1,2,3,4,5];
const squares = numbers.map(a => a*a);
console.log(squares);
This blog contains all the necessary information related to arrow functions. These are widely used in modern JavaScript for shorter and cleaner code.