Arrow functions in JavaScript

Arrow function Introduced in ES6. They provide concise syntax to write a standard function.

Standard Function :

function add (a , b){
    return a + b;
}

Arrow Function :

const add = (a, b) => a + b;

Arrow function are anonymous don't have name . You cannot give it a name during definition.

Assigned to Variables: To reuse or reference an arrow function, you must assign it to a variable (e.g., const myFunc = () => { ... };).

const greet = () => {
  console.log("Hello");
};

greet(); // reuse
greet(); // reuse again

They are design for inline code that and reduce syntax . It is very useful for callbacks.

Key Features :

Single Parameter (no parentheses needed): const square = x => x * x;

Implicit Return : Single line function automatically return without return keyword.

Callbacks/Array Methods : Ideal for callbacks and array method like .map() , .filter() and reduce() .

Arrow function with array method :

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

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

console.log(doubled); // [2, 4, 6, 8]

Arrow function with setTimeout :

setTimeout(() => {
  console.log("Runs after 2 seconds");
}, 2000);

Implicit & Explicit return :

implicit return : Arrow function offers implicit return for single line expression. You can return without braces and return keyword.

const add = (a, b) => a - b;

Explicit return : Multi-line body needs braces and return keyword to return the value from function.

const add = (a, b) => {
  return a + b;
};

Characteristics :

No this binding : Arrow function does not have their own this it always inherit this from parent function .

const user = {
  name: "john",

  greet: () => {
    console.log(this.name);
  }
};

user.greet(); // output : undefined ❌

function outer() {
  const name = "john";

  const obj = {
    name: "smile",

    greet: () => {
      console.log(this.name);
    }
  };

  obj.greet();
}

outer(); //output: undefined 

Arrow function takes this from lexical parent.

output : undefined

Why doesn’t arrow function take this of outer()

Because outer function does not have useful this to give.

outer() function called like standard function.

So its this = global object (or undefined in strict mode)

How to make it work :

function outer() {
  this.name = "john";

  const obj = {
    name: "smile",

    greet: () => {
      console.log(this.name);
    }
  };

  obj.greet();
}

outer(); // john ✅

outer() has this.name and arrow function inherits it.

No Object Parameter : In standard function you get special object called arguments. This object has all argument values even if you don't define in parameter.

function add() {
  console.log(arguments);
}

add(1, 2, 3);

output : [1, 2, 3]

But arrow function don't have arguments object Instead you can you ...args

const add = (...args) => {
  console.log(args);
};

add(1, 2, 3);

output : [1, 2, 3]

Summary : Arrow functions are a modern JavaScript feature introduced in ES6 that provide a shorter and cleaner way to write functions. They are especially useful for writing concise, inline logic and are widely used in callbacks such as map, filter, reduce, event handlers, and asynchronous operations.

Unlike standard functions, arrow functions do not have their own this or arguments object. Instead, they inherit this from their surrounding (lexical) scope, which makes them very helpful in scenarios like nested functions or asynchronous code. However, this behavior also means they are not suitable for object methods or constructors.

Another key advantage of arrow functions is their simplified syntax, including implicit return for single expressions, making the code more readable and maintainable.