AlgoInsight

Q&A

What is an arrow function in JavaScript?

By AlgoInsight Team2026-06-07javascript

Overview

Arrow functions, introduced in ES6 (2015), provide a shorter function syntax and - more importantly - change how this binding works. A regular function gets its own this depending on how it's called; an arrow function captures this from where it's defined. This single difference resolves a whole class of classic JavaScript bugs.

graph TD
    A[Arrow function] --> B[Concise syntax: () => expr]
    A --> C[Lexical this: inherits from enclosing scope]
    A --> D[No own arguments, no super, no prototype]
    A --> E[Cannot be a constructor: no 'new']
    C --> F[Great for callbacks]
    E --> G[Bad for object methods / constructors]
    style C fill:#1e1b4b,color:#fff

Syntax Forms

const add = (a, b) => a + b;          // implicit return (one expression)
const square = x => x * x;            // single param: parens optional
const greet = () => "hi";             // no params: empty parens required
const make = () => ({ ok: true });    // return an object: wrap in ()
const sum = (a, b) => {               // block body: explicit return needed
  const s = a + b;
  return s;
};

Key shortcuts: a single expression body returns implicitly (no return, no braces); a single parameter can drop its parentheses.

The this Behavior (the main point)

A regular function's this depends on the call site and can be lost in callbacks:

const counter = {
  count: 0,
  startBroken() {
    setInterval(function () {
      this.count++;        // ❌ 'this' is the timer/global, NOT counter
    }, 1000);
  },
  startFixed() {
    setInterval(() => {
      this.count++;        // ✓ arrow inherits 'this' from startFixed → counter
    }, 1000);
  }
};

The arrow function captures this lexically, so this.count correctly refers to counter. Before arrows, developers used const self = this; or .bind(this) to achieve this.

Where Arrow Functions Are the WRONG Choice

Because they have no own this, avoid them as object methods and constructors:

const obj = {
  value: 42,
  getValue: () => this.value   // ❌ 'this' is NOT obj - likely undefined
};

const Person = (name) => { this.name = name; };
new Person("Ada");             // ❌ TypeError: arrow functions can't be constructors

Also, arrow functions have no arguments object (they inherit the enclosing one) and no prototype.

Arrow vs Regular Function - Summary

Feature Regular function Arrow function
this binding Dynamic (call site) Lexical (definition scope)
arguments object Yes No (inherits)
Usable with new Yes No
Has prototype Yes No
Can be a method/constructor Yes Not recommended / no
Hoisting Declarations hoisted Not hoisted (it's an expression)

Common Idioms

[1, 2, 3].map(n => n * 2);             // clean callbacks
arr.filter(x => x > 0).reduce((a, b) => a + b, 0);
promise.then(res => res.json());

Arrow functions shine in array methods, promises, and event handlers where you want the surrounding this.

Why This Matters in Interviews

This is one of the most common JS interview topics. Nail the concise-syntax forms (implicit return, object-return parentheses), and - the crucial part - explain lexical this with a setInterval/callback example. Equally important is knowing when not to use arrows (object methods, constructors) and that they lack their own arguments. Contrasting with bind/self = this shows historical understanding.

Common Pitfalls

References

More answers