Arrow Functions in JavaScript

Arrow functions were introduced in ES6 (ECMAScript 2015) as a shorter and cleaner way to write functions. They provide a compact syntax, are often used in callbacks and functional programming, and handle the this keyword differently from regular functions.

Syntax of Arrow Functions

Arrow functions use the => (fat arrow) syntax and can be written in multiple forms depending on complexity.

Basic Syntax:

const add = (a, b) => a + b;
console.log(add(5, 3)); // 8

With Multiple Statements:

If the function body has more than one statement, wrap it in {} and use return explicitly:

const multiply = (a, b) => {
  const result = a * b;
  return result;
};
console.log(multiply(4, 5)); // 20

With One Parameter:

Parentheses can be omitted if there’s only one parameter:

const square = n => n * n;
console.log(square(6)); // 36

Without Parameters:

Use empty parentheses () if no parameters are needed:

const greet = () => console.log("Hello, World!");
greet(); // Hello, World!

Use Cases of Arrow Functions

Arrow functions are commonly used for short, simple functions — especially as callbacks or inline functions.

Common Use Cases:

Array Methods (map, filter, reduce):

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

Event Handlers (in modern frameworks like React):

button.addEventListener('click', () => console.log('Button clicked!'));

Simplifying Callback Functions:

setTimeout(() => console.log('Executed after delay'), 1000);

Functional Programming:

Arrow functions make chaining methods more readable and concise.

Lexical `this` Behavior

One of the most important differences between arrow functions and traditional functions is how they handle the this keyword.

Regular functions: this refers to the object that called the function.
Arrow functions: this is lexically bound — it uses the this value from the surrounding scope (the scope where the arrow function is defined).

Example: Regular Function vs Arrow Function

const person = {
  name: "Alice",
  regularFunc: function() {
    console.log(this.name); // Works -> "Alice"
  },
  arrowFunc: () => {
    console.log(this.name); // Undefined -> inherits `this` from global scope
  }
};

person.regularFunc(); // Alice
person.arrowFunc();   // undefined

Example of Lexical this Fixing Nested Scope Issues

Before arrow functions, developers often used a workaround like const self = this; to maintain context inside nested functions.

function Person(name) {
  this.name = name;
  setTimeout(function() {
    console.log(this.name); // undefined (this refers to global object)
  }, 1000);
}

new Person("Bob");

Using an arrow function fixes this issue:

function Person(name) {
  this.name = name;
  setTimeout(() => {
    console.log(this.name); // Bob (inherits `this` from Person)
  }, 1000);
}

new Person("Bob");

When NOT to Use Arrow Functions

Arrow functions are not suitable in all situations:

When you need your function to have its own this (e.g., object methods, constructors).
When using the arguments object (arrow functions do not have their own arguments).

Example:

const obj = {
  value: 10,
  show: () => {
    console.log(this.value); // undefined
  }
};
obj.show();

JavaScript Handbook