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();