All topics
19 / 100
Functionsbeginner

Arrow Functions vs Regular Functions

Syntax differences aside, arrow functions differ from regular functions in how they bind this, whether they can be constructors, and whether they have their own arguments object.

Arrow functions are not just shorter syntax. Four behaviours differ, and this is the one that matters.

A regular function's `this` is like an actor who plays whatever role they're handed at each show (dynamic per performance); an arrow function is like an actor's own personality peeking through no matter the costume — it never actually changes based on where it's used.

Key Concepts

1
this is lexical. An arrow does not have its own this — it uses the one from where it was written.
this
2
    const obj = {
      name: 'Asha',
      regular() { console.log(this.name); },
      arrow: () => console.log(this.name)
    };
3
    obj.regular();   // 'Asha'
    obj.arrow();     // undefined -- this is the enclosing scope's
4
Which makes arrows right in callbacks and wrong as methods.
    // the classic problem
    const timer = {
      count: 0,
      start() {
        setInterval(function () {
          this.count++;        // this is not timer
        }, 1000);
      }
    };
5
    // fixed
    start() {
      setInterval(() => this.count++, 1000);   // this is timer
    }
6
Before arrows this needed const self = this or .bind(this), which is what you see in older code.
const self = this.bind(this)
7
They cannot be constructors.
    const F = () => {};
    new F();      // TypeError: F is not a constructor
8
No arguments object.
    function f() { return arguments; }   // works
    const g = () => arguments;           // ReferenceError
    const h = (...args) => args;         // use rest instead
arguments
9
No prototype property, which follows from not being constructible.
prototype
10
Where each belongs.
    object methods           regular -- you want this
    class methods            regular
    callbacks inside methods arrow -- you want the enclosing this
    array method callbacks   arrow -- shorter, and this is irrelevant
    constructors             regular
    event handlers needing
      the element            regular -- this is the element
11
The implicit return is the syntax part worth stating precisely.
    x => x * 2                  returns
    x => { x * 2 }              returns undefined -- braces are a body
    x => ({ a: 1 })             returns an object -- parens required
12
The second is a real bug, not a curiosity: a one-liner that silently returns nothing because braces were added when the body grew.
13
What the interviewer is probing.1. "When must you not use an arrow function?" Probing: the this binding. Stalls: "They are interchangeable." Moves up: as an object method or constructor, and as a DOM handler needing this to be the element — arrows take this from the enclosing scope.
14
2. "Why does an arrow function fix the callback this problem?" Probing: the mechanism. Stalls: "It binds this." Moves up: it has no this of its own, so the lookup goes to the enclosing scope — no bind or self = this needed.
15
3. "Do arrow functions have arguments?" Probing: what else they lack. Stalls: "Yes." *Moves up:* no — they have no arguments, no prototype and cannot be used with new; use rest parameters instead.
16
4. "What is the trap with implicit return and object literals?" Probing: syntax. Stalls: "It works." Moves up: the braces are parsed as a block, so you must wrap the object in parentheses.
Use cases:arrow-functionsthisfunctions