Arrow Function Expressions in JavaScript

What are arrow functions?

Thinking Gif

An arrow function expressions are just another way of writing functions but in a compact way as compared to traditional function expressions.

An arrow function expression is also known as fat-arrow functions.

Syntax

Basic Syntax

When we have a single parameter and a simple expression return is not needed

parameter => expression

Multiple parameters require parenthesis.

( parameter1, parameter2, parameterN ) => expression

When we have multiline statements then body braces and return are required

parameter => {
  let number = 1; 
  return number  + parameter;
}

When we have multiple parameters and multiline statements then also body braces and return are required

( parameter1, parameterN ) => {
  let number = 1; 
  return number  + parameter1 +  parameterN ;
}

Advanced Syntax

When we return an object literal we need to wrap it around parenthesis.

param => ( { name: "Kuldeep" } )

We can also rest parameters in arrow function expressions.

( param1, param2, ...paramN ) => expression

We can also add default parameters in arrow function expressions.

( num1 = 400, num2 = 89, num3 ) => expression

We can also destructure values within the parameters.

( [num1, num2] = [10, 20] ) => num1 + num2;  // result is 30
( {num1, num2} = { num1: 10, num2: 20 } ) => num1 + num2;  // result is 30

Surprised Gif Now you know all the cases of arrow functions. Let's see an example now.

Example

const infoArr = [
  'Kuldeep',
  'Gupta',
  'Full Stack Dev',
  'Loves to interact with others'
];
console.log(infoArr.map(info => info.length)); 
// result is Array [7, 5, 14, 29]

In the above example, we have an infoArray array which consists of some values. What we want is the length of each array element, so we are using map functions here which accept a callback function as its input which is nothing but the fat arrow function, and then after its complete execution it will return an array with elements length.

Comparing traditional function to arrow function

Let's break down a traditional anonymous function into the simplest arrow function.

Traditional Anonymous Function Expression

function (num) {
  return num + 5;
}

Arrow Function Breakdown
1. First, remove the word "function" and place the arrow between the argument and opening body bracket.
```
(num) => {
return num + 5;
}
```
2. Second, remove the body braces and the word "return".
```
(num) => num + 5; // return is implied
```
3. Lastly, remove the argument parenthesis.
```
num => num + 5;
```

As we have seen above, traditional anonymous function expressions take three lines and a return statement to write a simple function but in an anonymous arrow function expression, we can achieve the same in a single line code.

Note: The { braces } and ( parenthesis ) and return are required in some cases. Don't worry we will see the example below as we move forward.

Limitations of arrow functions

Arrow functions don't have their own bindings to this, arguments or super, and should not be used as methods.
Arrow functions don't have access to the new.target keyword.
Arrow functions aren't suitable for call, apply and bind methods, which generally rely on establishing a scope.
Arrow functions cannot be used as constructors.
Arrow functions cannot use yield, within its body.

Conclusion

Arrow functions are simpler versions of traditional functions.
They come in two flavors:
- Without curly braces: (...args) => expression – the right side is an expression: the function evaluates it and returns the result. Parentheses can be omitted if there’s only a single argument.
- With curly braces: (...args) => { body } – brackets allow us to write multiple statements inside the function, but we need an explicit return to return something.

References

Thank you for reading!

Connect with me on: