DEV Community

loading...

ES6 Fat Arrow Functions

Bipon Biswas
Front End Engineer at Pridesys IT Ltd, a Software company based in Dhaka, Bangladesh.
・2 min read

Normal function to Arrow Function

Firstly create a function

function number(){
  return 10;
}
console.log(number())
Enter fullscreen mode Exit fullscreen mode

Oputput : 10

Now can convert to Arrow function

let number = () => {
  return 10
}
Enter fullscreen mode Exit fullscreen mode

or let number = () => 10

If one line statement then remove return keyword otherwise showing error

or

let number = () => console.log(10)
number()
Enter fullscreen mode Exit fullscreen mode

console.log(number())

Oputput : 10

Pass two parameter

let number = (a, b) => a + b;

console.log(number(10, 5));
Enter fullscreen mode Exit fullscreen mode

Oputput : 15

Another Example

var javascript = {
  name: 'Javascript',
  libraries: ['React', 'Angular', 'Vue'],
  printLibraries: function(){
    this.libraries.forEach(function(a) {
      console.log(`${this.name} loves ${a}`)
    })
  }
}

javascript.printLibraries()
Enter fullscreen mode Exit fullscreen mode

Oputput : undefined Name is undefined.

Alt Text

var javascript = {
  name: 'Javascript',
  libraries: ['React', 'Angular', 'Vue'],
  printLibraries: function(){
    this.libraries.forEach(function(a) {
      console.log(this)
      console.log(`${this.name} loves ${a}`)
    })
  }
}

javascript.printLibraries()
Enter fullscreen mode Exit fullscreen mode

Oputput

Alt Text

Bit more update using self variable.

var javascript = {
  name: 'Javascript',
  libraries: ['React', 'Angular', 'Vue'],
  printLibraries: function(){
    var self = this;
    this.libraries.forEach(function(a) {
      console.log(`${self.name} loves ${a}`)
    })
  }
}

javascript.printLibraries()
Enter fullscreen mode Exit fullscreen mode

Oputput
Alt Text

So avoid this complexity. We can move on Fat Arrow Function

Using Fat Arrow Function example

var javascript = {
  name: 'Javascript',
  libraries: ['React', 'Angular', 'Vue'],
  printLibraries: function(){
    // this = {javascript}
    this.libraries.forEach((a) => console.log(`${this.name} loves ${a}`));
  }
}

javascript.printLibraries()
Enter fullscreen mode Exit fullscreen mode

Oputput

Alt Text

So output same. But there is no conflict with this. This is the benefit of Arrow Function. That's why come to Arrow Function.

Another Example

// Normal function that works
const searchInput = document.querySelector(".search");
const display = document.querySelector(".result");
const thanks = document.querySelector(".thanks");

// normal
function show() {
  display.innerHTML = this.value; // get input value
  setTimeout(function () {
    thanks.innerHTML = `You have typeed: ${this.value}`;
  }, 1000);
}

searchInput.addEventListener("keyup", show);
Enter fullscreen mode Exit fullscreen mode

Oputput

Alt Text

Bit more update for this. Before change this. We can store a reference by var self = this

const searchInput = document.querySelector(".search");
const display = document.querySelector(".result");
const thanks = document.querySelector(".thanks");

// normal
function show() {
  display.innerHTML = this.value; // get input value
  var self = this;
  setTimeout(function () {
    thanks.innerHTML = `You have typeed: ${self.value}`;
  }, 1000);
}

searchInput.addEventListener("keyup", show);
Enter fullscreen mode Exit fullscreen mode

Oputput

Alt Text

Now convert again to Arrow Function

const searchInput = document.querySelector(".search");
const display = document.querySelector(".result");
const thanks = document.querySelector(".thanks");

const show = () => {
  display.innerHTML = this.value;
};
searchInput.addEventListener("keyup", show);
Enter fullscreen mode Exit fullscreen mode

Oputput

Alt Text

Call bind will not work for Arrow Function

new keyword in fat arrow function

function Person(name) {
  this.name = name;
}
var sajib = new Person("Sajib");
Enter fullscreen mode Exit fullscreen mode

In JavaScript every function as a constructor function

But If we change as a arrow function.

var Person = (name) => {
  this.name = name;
}
var sajib = new Person("Sajib")
Enter fullscreen mode Exit fullscreen mode

Oputput

Alt Text

So If we use arrow function then can't use new keyword.

Thanks for reading.

Discussion (0)