React ES6 Arrow Functions – Shorter Syntax and this Context Explained

Arrow functions were introduced in ES6 to provide a more concise way of writing functions. They are especially useful in React when passing functions as props, managing event handlers, or working with array methods like .map(). Additionally, arrow functions have a unique way of handling the this keyword, which simplifies working with object methods.

In this tutorial, we’ll cover:

• Writing functions with arrow syntax
• Returning values without return
• Handling parameters in arrow functions
• Managing the this context in React components

1. Writing Arrow Functions #

Arrow functions let you write functions with a simpler syntax.

Example: Regular Function vs. Arrow Function

// Regular function
let greet = function () {
  return "Hello, World!";
};

// Arrow function
let greet = () => {
  return "Hello, World!";
};
console.log(greet()); // Output: Hello, World!

Explanation:

The arrow function syntax replaces the function keyword with =>. The behavior is identical, but the syntax is more compact.

2. Returning Values with Arrow Functions #

When an arrow function contains only one statement, you can skip the curly braces and the return keyword.

Example: Implicit Return

let greet = () => "Hello, World!";
console.log(greet()); // Output: Hello, World!

Note:

Implicit returns only work when there’s a single statement in the function.

3. Passing Parameters to Arrow Functions #

You can pass parameters to arrow functions just like regular functions.

Example: Arrow Function with Parameters

let greet = (name) => `Hello, ${name}!`;
console.log(greet("Alice")); // Output: Hello, Alice!

If the function has only one parameter, you can omit the parentheses.

Example: Arrow Function Without Parentheses

let greet = name => `Hello, ${name}!`;
console.log(greet("Bob")); // Output: Hello, Bob!

4. Handling this in Arrow Functions #

Arrow functions behave differently than regular functions in terms of this binding. Unlike regular functions, arrow functions do not have their own this. Instead, this refers to the context in which the arrow function was defined.

Example: Regular Function and this Behavior

class Header {
  constructor() {
    this.color = "Red";
  }

  // Regular function
  changeColor = function () {
    console.log(this); 
  };
}

const myHeader = new Header();

// `this` refers to the object that calls the function
window.addEventListener("load", myHeader.changeColor); // Logs: Window object
document.getElementById("btn").addEventListener("click", myHeader.changeColor); // Logs: Button object

Example: Arrow Function and this Behavior

class Header {
  constructor() {
    this.color = "Red";
  }

  // Arrow function
  changeColor = () => {
    console.log(this);
  };
}

const myHeader = new Header();

// `this` always refers to the Header object, regardless of who calls it
window.addEventListener("load", myHeader.changeColor); // Logs: Header object
document.getElementById("btn").addEventListener("click", myHeader.changeColor); // Logs: Header object

Key Difference:

• In a regular function, this refers to the object that called the function (e.g., window, button).
• In an arrow function, this refers to the object where the function was defined, maintaining consistency across different calls.

5. When to Use Arrow Functions in React #

Arrow functions are commonly used in React for:

• Event handlers (e.g., onClick handlers)
• Inline functions when passing functions as props
• Array methods like .map() for rendering lists

Example: Using Arrow Function as an Event Handler

function Button() {
  return (
    <button onClick={() => console.log("Button clicked!")}>
      Click Me
    </button>
  );
}

Example: Using Arrow Functions with .map()

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6]

Summary

Arrow functions offer a more concise syntax for writing functions and solve common issues with the this keyword in React components. Use them for event handlers, inline functions, and array operations to simplify your code. However, remember to use regular functions if you need to bind this dynamically.

Want to learn React with an instructor, either offline or online? Find experienced tutors near you and join Coaching Wallah—completely free for students!