- They are more of a brief syntax for writing the function expression. It is also known as ‘fat arrow ‘(=>) the functions.
- This keyword represented the object that called the function, which could be the window, the document, a button or whatever in a regular function.
- It allows to bind the context of the components properly since in ES6 auto binding is not available by default.
- While working with the higher-order functions, Arrow functions are most useful.
- This keyword always represents the object that defined the arrow function in arrow function.
For example, in regular functions:
class Header {
constructor() {
this.color = "Blue";
}
//Regular function:
changeColor = function() {
document.getElementById("demo").innerHTML += this;
}
}
const myheader = new Header();
//The window object calls the function:
window.addEventListener("load", myheader.changeColor);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);
For example, in Arrow functions:
class Header {
constructor() {
this.color = "Blue";
}
//Arrow function:
changeColor = () => {
document.getElementById("demo").innerHTML += this;
}
}
const myheader = new Header();
//The window object calls the function:
window.addEventListener("load", myheader.changeColor);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);
