Arrow functions or 'fat arrow' functions provide a way to quickly declare functions using shorter syntax, with or without parameters. They can be very helpful but we need to know where to use them because sometimes good old functions are better.

But before we get into the details, let's learn how to make arrow functions!

Rewrite traditional functions to arrow functions

Normally you'd declare a function like this:

function (a) {
return a + 10
};

Now, to go from this to an arrow function you'll need to:

Dispose the word function and place an arrow ( => )
```
(a) => {
return a + 5
}
```
Remove the curly braces
```
(a) => return a + 5
```
Delete return
```
(a) => a + 5
```
Get rid of the parentheses
```
a => a + 5
```

⚠️ It's important to point out that all of the steps we did to make a traditional function become an arrow function are also VALID ways of making arrow functions. As in the last one is chef's kiss but all the others will work too.

⚠️Sometimes return, paretheses and curly braces are needed in arrow functions, like we'll see in the next section.

Multiple or no arguments

Just like in traditional functions, you can pass arguments to arrow functions.

If we have multiple arguments we need to use paretheses around them when making the arrow function.

Guess who's back, back again 🎶

With multiple arguments we'll go from this:

function (a, b) {
return a + b + 3
};

To this:

(a, b) => a + b + 3;

What if instead we have no arguments??

Well, my friend, it'll look something like this instead:

let a = 6
let b = 7
() => a + b + 3;

Default parameters

These kick in when the argument is not specified. You can add as many default values for as many parameters as you'd like.

const capAmerica = ( name = "Sam") => " Hello" + " " + name

//console.log(capAmerica()) -> Hello Sam
//console.log(capAmerica("Steve")) -> Hello Steve

Return

Return is usually implicit in arrow functions but we can't forget about return when we have more lines of code we want to process.

Let's say we have this traditional function:

function (a, b){
  let peter = 17
  return a + b + peter
};

And we make it an arrow function:

(a, b) => {
  let peter = 17
  return a + b + peter
};

Named functions

Arrow functions can also be contained in variables!

Let's take a look from a traditional function:

function peter(a){
  return a + 3;
}

To an arrow function:

let peter = a => a + 3;

Array manipulation

Arrow functions are extremely powerful when we need to manipulate an array with these methods:

Map()
Filter()
Reduce()

And more!

Let's see an example with .map()

const marvel = [
 { name: 'Peter', identity: 'Spiderman'},
 { name: 'Tony', identity: 'Ironman'},
 { name: 'Steve', identity: 'Captain America'}
];

Let's see it with a traditional function:

const secretIdentity = marvel.map(function(hero){
   return hero.name
 })

//console.log(secretIdentity) -> ["Peter", "Tony", "Steve"]

But using an arrow function we get a nice one liner function:

var secretIdentity = marvel.map(hero => hero.name);

//console.log(secretIdentity) -> ["Peter", "Tony", "Steve"]

They can also be used with Destructuring and the Rest parameter. Learn more about Destruturing, Default values and Rest parameters

Differences

As we can see arrow functions provide many benefits and are the right tool for you if you know how and when to use them. I believe it's time for us to make a quick comparison between them and traditional functions.

Let's focus on 3 key points:

This keyword

In traditional functions, the this keyword is bound to different values based on the context the function is called, it's dynamic. BUT with arrow functions the value is 'inherited' from where it is defined, meaning it's equal to the this of the function. Leading to different behaviour.
Return

In traditional functions the return needs to be specified. In Arrow functions the return is implicit, even without using the word return.
Anonymity

Arrow functions don't need to be named for them to be able to work, specially when you don't reuse them anywhere else in your code.

Conclusion

Arrow functions don't replace traditional JavaScript functions, they're just a nice way of writing code and a tool quite useful that helps you write concise one-liners with implicit return where you once had to write a block of code whilst also making it more readable.

I've personally found them great to work with array methods and event listeners in the projects i've built. There's something about making a traditional function become a one line function that makes you feel super smart hahaha, so go ahead and play around with it, you'll probably like them even more than i do!!

I really hope you learned something new today!

Thank you for reading!! :)

Don't hesitate to contact me and let me know if you'd like to add something else in the comments.

☕If you enjoy my content Buy me a coffee It'll help me continue making quality blogs💕

Yuri's Notes

Yuri's Notes

Arrow Functions in JavaScript

No brackets?? Implicit return? When to use them?? Let's learn more about it!

Rewrite traditional functions to arrow functions

Multiple or no arguments

Default parameters

Return

Named functions

Array manipulation

Differences

This keyword

Return

Anonymity

Conclusion

Resources