A Beginner’s Guide to Arrow Functions in ES6: Part 1

https://medium.com/@josephcardillo?source=follow_footer--------------------------follow_footer-

What are the benefits of arrow functions?

• They are more concise.
• They have implicit returns. (We’ll get into this below.)
• They do not rebind the value of this when you use an arrow function inside another function. (We’ll get into this in a later post.)

---

How do I convert my ES5 functions to ES6 arrow functions?

Let’s start with a simple example using .map().

*If you need a refresher on const, see my previous posts here and here.

// Let's define an array of first names:
const names = ['joe', 'rache', 'micaela'];

// If I want to add my last name to each 

I'll run the following function using .map():
const fullNames = names.map(function(name) {
    return `${name} cardillo`;
});

// In the console when I call:
names

// It returns:
['joe', 'rache', 'micaela']

// Then if I call the function:
fullNames

// It returns:
["joe cardillo", "rache cardillo","micaela cardillo"]

---

To start, delete the word ‘function’ and replace it with a fat arrow =>

const fullNames = names.map((name) => {
    return `${name} cardillo`;
 });

If you have only one parameter you can remove the parenthesis from it:

const fullNames = names.map(name => {
    return `${name} cardillo`;
 });

---

You can also do an “implicit return.”

But first, what is an explicit return?

An explicit return is when you explicitly write the word return in the function.

To do an implicit return, remove the word return, then move what you are returning up to the same line as the rest of the function. You can remove the curly brackets.

// Explicit return:
const fullNames = names.map(name => {
    return `${name} cardillo`;
 });// Implicit return:
const fullNames = names.map(name => 

`${name} cardillo`);

If there is no parameter you can replace it with parenthesis:

const fullNames = names.map(() => 

`hey cardillo!`);// Returns:
["hey cardillo!", "hey cardillo!", 

"hey cardillo!"]

---

Arrow functions are always anonymous functions.

Before describing an anonymous function, let’s first answer the question, “What is a named function?”

// In ES5 a named function can be written as 

follows:
function myFavFood(food) {
  console.log(`My favorite food is ${food}!`);
}

// myFavFood is the name of the function.

// Calling this in the console:
myFavFood('pizza');// Returns:
My favorite food is pizza!

In the above arrow functions, notice that we set all of them equal to a const variable called fullNames.

So why would we want to set our arrow function equal to a variable?

One reason is that it can help us debug JavaScript errors, since sometimes the line number isn’t enough to narrow down where it’s coming from.

Using the food example, we can assign the arrow function to a const variable called myFavFood.

const myFavFood = (food) => { 

console.log(`My favorite food is ${food}!`) }

// In the console:
myFavFood('pizza');

// Returns:
My favorite food is pizza!

Front End Dev

Facebook

Twitter 

Copyright ©2020