Arrow Functions vs Regular Functions: Complete Comparison

Arrow Functions vs Regular Functions: Complete Comparison

Arrow functions (ES6) and regular functions look similar but behave differently in several important ways. Here is the complete comparison.

Syntax

// Regular
function greet(name) { return `Hello, ${name}`; }

// Arrow
const greet = (name) => `Hello, ${name}`;
``
Arrows are more concise, especially for one-liners.

### `this` Binding

- **Regular**: `this` is determined at **call time** (by how the function is called).
- **Arrow**: `this` is **lexical** (inherited from the enclosing scope at definition time).

```js
function Foo() {
  this.value = 1;
  // regular: this is lost in the callback
  setTimeout(function () { console.log(this.value); }, 0); // undefined
  // arrow: this is inherited from Foo
  setTimeout(() => { console.log(this.value); }, 0);       // 1
}
new Foo();
``
`call`, `apply`, and `bind` **cannot** change an arrow's `this`.

### `arguments` Object

- **Regular**: has its own `arguments` object.
- **Arrow**: no own `arguments`. References the enclosing function's `arguments`. Use rest parameters (`...args`) in arrows.

```js
function regular() { console.log(arguments[0]); }
regular("a"); // "a"

const arrow = () => console.log(arguments[0]); // ReferenceError or wrong
``
### `new` (Constructor)

- **Regular**: can be called with `new` (creates a new object).
- **Arrow**: **cannot** be called with `new` (throws `TypeError`).

```js
function Person(name) { this.name = name; }
const p = new Person("Kunal"); // OK

const PersonArrow = (name) => { this.name = name; };
new PersonArrow("Kunal"); // TypeError: PersonArrow is not a constructor
``
### `prototype` Property

- **Regular**: has a `prototype` property (used for `new`).
- **Arrow**: does **not** have a `prototype` property.

### `super` and `new.target`

- **Regular**: `super` and `new.target` are available.
- **Arrow**: `super` and `new.target` are inherited from the enclosing scope (not own).

### `yield` (Generators)

- **Regular**: can be a generator function (`function*`).
- **Arrow**: **cannot** be a generator (no `function* () => {}`).

### Hoisting

- **Regular declaration**: hoisted with full body (callable before the line).
- **Arrow (always expression)**: variable hoisted only (`const` in TDZ).

### When to Use Arrows

- Short callbacks: `.map((n) => n * 2)`.
- Inside methods/constructors where you want lexical `this`.
- One-liners where conciseness matters.

### When to Use Regular Functions

- Object methods (you want `this` to be the object).
- Constructors (you need `new`).
- Functions that need `arguments` or `yield`.
- Top-level helpers where hoisting is useful.

### The Takeaway

Arrows have lexical `this`, no `arguments`, no `new`, no `prototype`, no `yield`. Regular functions have call-time `this`, own `arguments`, `new`, `prototype`, and `yield`. Use arrows for callbacks and lexical `this`; use regular functions for methods, constructors, and generators.