Hey learners!

Today I will show you three simple steps to convert a traditional function into an arrow function in JavaScript.

I am not going to explain the boring stuff like why they are used, because you might have already heard or even seen them before at least.

TL;DR; Arrow functions basically helps us to reduce the amount of code we need to write to define functions.

Example:

const materials = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

console.log(materials.map(material => material.length));
// expected output: Array [8, 6, 7, 9]

Checkout my article on 8 Must Know JavaScript Array Methods

Converting traditional functions into arrow functions

Let's decompose a "traditional function" down to the simplest "arrow function" step-by-step:

NOTE: Each step along the way is a valid "arrow function"

Traditional Function:

// Traditional Function
function (a){
  return a + 100;
}

Lets break down the above function to an arrow function in 3 easy steps:

Step 1:

Remove the word "function" and place arrow between the argument and opening body bracket

(a) => {
  return a + 100;
}

Step 2:

Remove the body brackets and word "return" -- the return is implied.

(a) => a + 100;

Step 3:

Remove the argument parentheses

a => a + 100;

Here you go, we have converted a normal traditional function to an arrow function in 3 easy steps.

But hold on. Not every method is same as our example above. So, even the fundamental concept of conversion is same, there are some important points that you need to remember in order to deal with all kinds of functions that need to be converted.

We will discuss about them now.

Extras

As shown above, the { brackets } and ( parentheses ) and "return" are optional, but may be required.

For example, if you have multiple arguments or no arguments, you'll need to re-introduce parentheses around the arguments:

// Traditional Function
function (a, b){
  return a + b + 100;
}

// Arrow Function
(a, b) => a + b + 100;

// Traditional Function (no arguments)
let a = 4;
let b = 2;
function (){
  return a + b + 100;
}

// Arrow Function (no arguments)
let a = 4;
let b = 2;
() => a + b + 100;

Likewise, if the body has additional lines of code, you'll need to re-introduce brackets PLUS the "return" (arrow functions do not magically guess what or when you want to "return"):

// Traditional Function
function (a, b){
  let chuck = 42;
  return a + b + chuck;
}

// Arrow Function
(a, b) => {
  let chuck = 42;
  return a + b + chuck;
}

And finally, for named functions we treat arrow expressions like variables

// Traditional Function
function bob (a){
  return a + 100;
}

// Arrow Function
let bob = a => a + 100;

So, we came to an end of this short and sweet tutorial. Hope it helps and you learned something today.