React ES6 Arrow Functions - React Tutorial

Introduction to Arrow Functions in React

ES6 introduced a concise way to write functions in JavaScript known as arrow functions. These functions allow for shorter syntax and an easier way to handle scoping of the this keyword.

What are Arrow Functions?

Arrow functions provide a more succinct syntax for writing functions:

// Before:
const greet = function() {
  return "Hello, everyone!";
}

JS
​x
 
// Before:const greet = function() {  return "Hello, everyone!";}

With arrow functions, we can rewrite the same function in a more concise form:

// With Arrow Function:
const greet = () => {
  return "Hello, everyone!";
}

JS
 
// With Arrow Function:const greet = () => {  return "Hello, everyone!";}

Simplifying Further

If the function contains only a single statement that returns a value, we can omit the curly braces and the return keyword, This simplification works as long as there’s just one statement in the function.:

// Arrow Functions Return Value by Default:
const greet = () => "Hello, everyone!";

JS
 
// Arrow Functions Return Value by Default:const greet = () => "Hello, everyone!";

Handling Parameters

Arrow functions can also accept parameters. Here’s how to write an arrow function with parameters:

// Arrow Function With Parameters:
const greet = (name) => "Hello, " + name;

JS
 
// Arrow Function With Parameters:const greet = (name) => "Hello, " + name;

If there’s only one parameter, the parentheses can be omitted:

// Arrow Function Without Parentheses:
const greet = name => "Hello, " + name;

JS
 
// Arrow Function Without Parentheses:const greet = name => "Hello, " + name;

How Does `this` Work?

One of the key differences between arrow functions and regular functions is how they handle the this keyword. Arrow functions do not have their own this context; instead, this refers to the context in which the arrow function is defined.

In contrast, regular functions bind the this keyword to the object that calls the function, which can sometimes lead to unexpected behavior.

Regular Function vs Arrow Function Example

Let’s compare how this is handled in a regular function and an arrow function:

// Using a regular function:
class Widget {
  constructor() {
    this.type = "Gadget";
  }

  // Regular function:
  defineType = function() {
    document.getElementById("example").innerHTML += this;
  }
}

const myWidget = new Widget();

// The window object calls the function:
window.addEventListener("load", myWidget.defineType);

// A button object calls the function:
document.getElementById("btn").addEventListener("click", myWidget.defineType);

JS
 
// Using a regular function:class Widget {  constructor() {    this.type = "Gadget";  }​  // Regular function:  defineType = function() {    document.getElementById("example").innerHTML += this;  }}​const myWidget = new Widget();​// The window object calls the function:window.addEventListener("load", myWidget.defineType);​// A button object calls the function:document.getElementById("btn").addEventListener("click", myWidget.defineType);

In contrast, here’s how it works with an arrow function:

In these examples, the regular function returns different objects (window and button), while the arrow function consistently returns the Widget object.

// Using an arrow function:
class Widget {
  constructor() {
    this.type = "Gadget";
  }

  // Arrow function:
  defineType = () => {
    document.getElementById("example").innerHTML += this;
  }
}

const myWidget = new Widget();

// The window object calls the function:
window.addEventListener("load", myWidget.defineType);

// A button object calls the function:
document.getElementById("btn").addEventListener("click", myWidget.defineType);

JS
 
// Using an arrow function:class Widget {  constructor() {    this.type = "Gadget";  }​  // Arrow function:  defineType = () => {    document.getElementById("example").innerHTML += this;  }}​const myWidget = new Widget();​// The window object calls the function:window.addEventListener("load", myWidget.defineType);​// A button object calls the function:document.getElementById("btn").addEventListener("click", myWidget.defineType);