Suggest an edit

Improve this article

Refine the answer for “How do arrow methods differ from regular ones?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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).

Markdown · drag & drop images · ⌘B / ⌘I shortcuts766 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.