Arrow Functions in JavaScript

Before understanding what arrow functions do and why they were introduced, we should first understand function expressions.

->Function Expression

A function expression means defining a function using the function keyword and assigning it to a variable.

In earlier JavaScript code, developers commonly wrote functions like this:

const ctc = function (base, variable) {
  return base + variable;
};

console.log(ctc(30000, 40000));

Here:

• A function is created using the function keyword

• It is assigned to the variable ctc

• The function returns the sum of two values

->Arrow Functions

Arrow functions provide a shorter syntax for writing function expressions.

Example:

const ctc = (base, variable) => base + variable;

console.log(ctc(30000, 40000));

This is simply a modern alternative to the traditional function expression.

However, arrow functions have different behavior compared to regular functions.

Important Characteristics of Arrow Functions

1. No own this binding

Arrow functions do not create their own this.

Instead, they inherit this from the surrounding (parent) scope.

Regular functions behave differently.

• Regular functions → dynamic this

• Arrow functions → lexical this

Understanding this with an Analogy

Imagine the Great Hall of Winterfell as the parent scope.

Lord Eddard Stark sends two warriors to the Red Keep.

The Sellsword – Regular Function (Bronn)

Bronn's loyalty changes depending on who currently employs him.

When asked:

"Who do you fight for?"

He responds:

"I fight for House Lannister."

Because his loyalty depends on who called him.

this = object calling the method

---

The Loyal Bannerman – Arrow Function (Arya Stark)

Arya's loyalty never changes.

Even if she is physically in the Red Keep, she still says:

"I fight for House Stark."

Because her loyalty was defined in Winterfell, where she originated.

this = parent scope where function was created

Code Example

const winterfell = {
  houseName: "Stark",

  sendWarriorsSouth: function () {

    const redKeep = {
      houseName: "Lannister",

      bronn: function () {
        console.log(`Bronn says: I fight for House ${this.houseName}`);
      },

      arya: () => {
        console.log(`Arya says: I fight for House ${this.houseName}`);
      }
    };

    redKeep.bronn();
    redKeep.arya();
  }
};

winterfell.sendWarriorsSouth();

/*
Bronn says: I fight for House Lannister
Arya says: I fight for House Stark*/

Important Note

Arrow functions are generally not used as object methods, because methods usually need access to the object via this.

Since arrow functions do not bind their own this, they cannot properly refer to the object.

Arrow Functions Cannot Be Used as Constructors

Regular functions can create objects using the new keyword.

Example:

function Car(model) {
  this.model = model;
}

const myCar = new Car("Honda");
console.log(myCar.model);//Honda

Arrow functions cannot be used as constructors.

const Bike = (model) => {
  this.model = model;
};

const myBike = new Bike("Yamaha"); // ❌ Error

Why?

Arrow functions:

• Do not have a .prototype

• Cannot bind a new this

• Therefore cannot create objects

Arrow Functions Cannot Use yield

A generator function can pause execution using yield.

Example:

function* snackMachine() {
  yield "Chips";
  yield "Chocolate";
  return "Empty";
}

const machine = snackMachine();

console.log(machine.next().value);
console.log(machine.next().value);
/*
Chips
Chocolate*/

Arrow functions cannot use yield, meaning they cannot be generator functions.

This design decision keeps arrow functions simple and lightweight.

Where Arrow Functions Are Commonly Used

In modern JavaScript applications, arrow functions are widely used in:

Event Handlers

button.addEventListener("click", () => {
  console.log("Button clicked");
});

Array Methods

const numbers = [1,2,3,4];

const doubled = numbers.map(n => n * 2);

Promises

fetch(url)
  .then(res => res.json())
  .then(data => console.log(data));

React / Modern Frontend

const handleClick = () => {
  console.log("Clicked");
};

Quick Summary

Feature	Regular Function	Arrow Function
Syntax	Longer	Shorter
this binding	Dynamic	Lexical
Can be constructor	✅ Yes	❌ No
Has prototype	✅ Yes	❌ No
Supports yield	✅ Yes	❌ No

# Rule of thumb

Use arrow functions when you want:

• Short syntax

• Lexical this

• Functional style code

Use regular functions when you need:

• Object methods

• Constructors

• Generators