How do arrow methods differ from regular ones?

JavaScriptJunior~2 min read

1. Syntax

Regular method:

javascript

class Button {
  handleClick() {
    console.log(this.label);
  }
}

Arrow method (field method):

javascript

class Button {
  handleClick = () => {
    console.log(this.label);
  };
}

At first glance, the only difference is = () => {}. But the behavior is radically different.

2. The Main Difference: `this` Behavior

Method Type	How `this` Works
Regular method	`this` is determined at call time (dynamically)
Arrow method	`this` is hard-bound to the instance when the object is created

Example:

javascript

class User {
  name = "Alice";

  normal() {
    console.log("normal:", this.name);
  }

  arrow = () => {
    console.log("arrow:", this.name);
  };
}

const u = new User();

setTimeout(u.normal, 500); // TypeError: Cannot read properties of undefined
setTimeout(u.arrow, 500);  // arrow: Alice

Conclusion:

normal() lost its context because it was called as a plain function.
arrow() kept its context because an arrow function has no this of its own, it "captures" this from the constructor.

3. Where Methods Are Stored

Method Type	Where It's Stored	Shared Across All Instances?
Regular	On `ClassName.prototype`	Yes
Arrow	On the instance itself (on every object)	No

Example:

javascript

class A {
  normal() {}
  arrow = () => {};
}

const a1 = new A();
const a2 = new A();

console.log(a1.normal === a2.normal); // true: one method on the prototype
console.log(a1.arrow === a2.arrow);   // false: each one has its own function

Conclusion: Arrow methods are recreated on every new A(). This gives independent this, but is slightly worse for memory and performance.

4. Use in Event Handlers and Callbacks

A regular method loses this unless you bind it manually:

javascript

class Button {
  constructor() {
    this.label = "Click me";
    document.body.addEventListener("click", this.handleClick);
  }

  handleClick() {
    console.log(this.label); // undefined
  }
}

Solution 1: bind it manually

javascript

document.body.addEventListener("click", this.handleClick.bind(this));

Solution 2 (more modern): use an arrow method

javascript

class Button {
  label = "Click me";

  handleClick = () => {
    console.log(this.label); // "Click me"
  };
}

Arrow methods are ideal for React components and event handlers, where it matters that this isn't lost.

5. Inheritance and Overriding

Regular methods can easily be overridden in subclasses (via super).
Arrow methods cannot be overridden via super, because they are created on the instance, not on the prototype.

javascript

class A {
  greet() { console.log("Hi from A"); }
}

class B extends A {
  greet() {
    super.greet(); // works
    console.log("Hi from B");
  }
}

But with an arrow method:

javascript

class A {
  greet = () => console.log("Hi from A");
}

class B extends A {
  greet = () => {
    super.greet(); // Error: super is not accessible
  };
}

That's why arrow methods are not suitable for inherited classes if you need to use super.

6. Difference in Iteration and Debugging

Regular methods are not visible via Object.keys() (they are non-enumerable).
Arrow methods are regular instance properties, so they are enumerable:

javascript

class Example {
  method() {}
  arrow = () => {};
}

const e = new Example();
console.log(Object.keys(e)); // ['arrow']

7. Performance

Criterion	Regular Method	Arrow Method
Memory	1 function shared by all	its own function per instance
Creation speed	Faster	Slower
`this` context	Lost unless bound	Always preserved
Suitable for `super`	Yes	No
Suitable for callbacks	Needs bind	Ideal

Summary Comparison

Feature	Regular Method	Arrow Method
Where it's stored	`Class.prototype`	On the instance
Shared by all	Yes	No
`this` behavior	Depends on the call	Fixed
Loses `this` in callbacks	Possible	No
Supports `super`	Yes	No
Participates in inheritance	Yes	No
Performance	Better	Slightly worse
Use in React, events	Inconvenient	Very convenient

Conclusion:

Use regular methods when a method is logically shared across all instances and may need to be overridden.
Use arrow methods when it matters that this is preserved (for example, when passing the method as a callback or event handler).

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.