What is Arrow Functions? Part 1

They have been introduced by the ECMAScript 6 specifications and since then become the most popular ES6 feature. Arrow functions are also called “fat arrow” functions as well.

The central symbol for an arrow function is the fat arrow “=>”

Let’s compare arrow functions and regular functions with a couple of examples.

Regular function:

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

Arrow function:

let sum = (a, b) => a + b;
alert( sum(1, 2) ); 
// 3

We do not need to add parenthesis if there is a single parameter in the function, and it would be easy to read:

let double = n => n * 2;
alert ( double(3) ); // 6
// regular function version
//let double = function(n) { return n * 2 }

But if there is no parameter, we need to add parentheses:

Let sayHi = () => alert(“Hello Universe!”);
sayHi();

Arrow functions may seem unfamiliar when first written, but once you get used to it, it’ll be easy to read and so much fun to use. I already loved using arrow functions more than regular functions as a person who started coding very recently.

• Multi-Line arrow functions:

All the examples above were pretty simple, and the parameters take from the left side of => and work on the right side of the arrow. In many scenarios, we need more complex structures. Let’s look at our example for multi-line arrow function:

let sum = (a, b) => { // we need “{“ for writing multi lines
let result = a + b;
return result; //if you are using curly parentheses, you need to return a value
};
alert( sum(1, 2) ); // 3

• this Value:

The most significant difference between an arrow function and a regular function is that this value inside of an arrow function always equals to this from the outer function.

Let group = {
title: “Flatiron”
instructors : [“Michelle”, “Aysan”, “Andy”],
showList() {
this.instructors.forEach(
instructor => alert(this.title + ‘: ‘ + instructor)
    );
  }
};
group.showList();
// Flatiron: Michelle, Flatiron: Aysan, Flatiron: Andy

We used arrow function for “forEach” method, and “this.title” has the same data as the outer showList function. It is basically “group.title”.

If we used regular function, we would have gotten an error message:

let group = {
title: “Flatiron”,
students: [“Michelle”, “Aysan”, “Andy”],
showList() {
this.instructors.forEach(function(student) {
alert(this.title + ‘: ‘ + student)
   });
  }
};
group.showList();
// TypeError: Cannot read properties of undefined (reading “title”)

• Can be asynchronous:

We can make an arrow function asynchronous hornous using the async/await syntax:

const func = async () => {
  // do something
}

Async arrow functions look like this for a single argument passed to it:

const func = async evt => {
  // do something with evt
}

Async arrow functions look like this for multiple arguments passed to it:

const func = async (evt, callback) => {
  // do something with evt
  // return response with callback
}

The anonymous form works as well:

const func = async function() {
  // do something
}

An async function declaration looks like this:

async function func() {
  // do something
}

Using async function in a callback:

const func = event.onCall(async () => {
  // do something
})

Using async method inside of a class:

async func() {
  // do something
}

• When you should avoid arrow functions:

1. You can’t use an arrow function to create methods in objects:

let person = ( 
name: 'Jack', 
age: 25, 
sayName: () => ( // this refers to the global… console.log(this.age); 
  ); 
 ); 
person.sayName(); // undefined

2. You cannot use an arrow function as a constructor:

let Foo = () => (); 
let foo = new Foo(); 
// TypeError: Foo is not a constructor

• When you should use arrow functions:

Despite the fact that they are anonymous, I also like using them with methods such as map and reduce, because I think it makes my code more readable. To me, the pros outweigh the cons.

I’m attaching a fundamental homework down blow for all of you to convert regular function to arrow function:

function ask(question, yes, no) {  
   if (confirm(question)) yes()  
   else no();
}  
ask(  
   "Are you acception?",   
   function() { alert("You accepted"); },   
   function() { alert("Stopped working"); 
  } 
 );

Summary

1. No parentheses if there is a single parameter.
2. Curly parentheses for multi lines.
3. No “this”.
4. Simple and easy to read.

Thanks to everyone who spent their 4 minutes to read my first technical blog. It was so much fun to write this blog and hopefully it was fun to read as well. Stay with codes :=>