Suggest an edit

Improve this article

Refine the answer for “Class vs constructor function”. 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)

**A class is syntactic sugar over prototypes, but not only sugar: it adds several hard behavioural rules a constructor function does not have.** Both mechanisms eventually create an object with a prototype, yet a class forbids calls without `new`, turns on strict mode, hides methods from enumeration and is not hoisted up the scope.

## Theory

### TL;DR
- A class cannot be called without `new`: that is a `TypeError`. A constructor function can be, and it silently pollutes the global object or throws.
- A class body always runs in strict mode, even without `'use strict'`.
- Class methods are non-enumerable, so they never show up in `for...in` or `Object.keys(Prototype)`.
- Classes are not hoisted: touching a class before its declaration throws a `ReferenceError`.
- Class inheritance is `extends` plus `super`, for functions it is manual `Object.create` and `call`.
- Private `#field` members exist only in classes.

### Quick example
```javascript
function UserFn(name) {
  this.name = name;
}
UserFn("Alice"); // works, but writes to the global object or throws in strict mode

class UserClass {
  constructor(name) { this.name = name; }
}
UserClass("Alice"); // TypeError: Class constructor UserClass cannot be invoked without 'new'
```

### Syntax and readability
**Constructor function:**

```javascript
function User(name) {
  this.name = name;
}

User.prototype.greet = function () {
  console.log(`Hi, ${this.name}`);
};

const user = new User("Alice");
user.greet();
```

**Class:**

```javascript
class User {
  constructor(name) {
    this.name = name;
  }

greet() {
    console.log(`Hi, ${this.name}`);
  }
}

const user = new User("Alice");
user.greet();
```

The class looks cleaner and more declarative, especially once inheritance appears. A constructor function forces you to wire up `prototype`, `Object.create()` and similar things by hand.

### Calling without new, and strict mode
A constructor function can be called without `new` by accident, and that leads to errors: `this` becomes `undefined` in strict mode or binds to the global object.

```javascript
function User(name) {
  this.name = name;
}

const u = User("Alice"); // error, or it creates a global window.name property
```

A class cannot be called without `new`, that is an immediate exception:

```javascript
class User {
  constructor(name) {
    this.name = name;
  }
}

const u = User("Alice"); // TypeError: Class constructor User cannot be invoked without 'new'
```

This makes classes safer. On top of that, the whole class body automatically runs in strict mode even if `'use strict'` is written nowhere. A constructor function gives no such guarantee: without an explicit `'use strict'` it runs in sloppy mode.

### Enumerability, class fields and hoisting
Methods defined inside `class {}` are non-enumerable, so they do not appear in a `for...in` walk, whereas methods on the `prototype` of a constructor function are enumerable:

```javascript
class A {
  m() {}
}
console.log(Object.keys(A.prototype)); // []

function B() {}
B.prototype.m = function() {};
console.log(Object.keys(B.prototype)); // ["m"]
```

That makes classes "cleaner" for iteration and serialisation.

Inside a class body you could not declare methods as ordinary function expressions:

```javascript
class A {
  m = function() {}; // SyntaxError in older engine versions
}
```

You need the class fields syntax or arrow functions for that, and those were standardised later (ES2022 and newer).

Finally, classes are not hoisted. Constructor functions can be called before they are declared:

```javascript
const a = new User();
function User() {}
```

Classes do not work that way:

```javascript
const a = new User(); // ReferenceError
class User {}
```

This prevents surprising runtime errors.

### Inheritance
With constructor functions you have to write a lot of boilerplate:

```javascript
function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  console.log(`${this.name} makes a sound`);
};

function Dog(name) {
  Animal.call(this, name);
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
```

And with classes:

```javascript
class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a sound`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks`);
  }
}
```

Short and clear. A class also gives you `super` for reaching the parent implementation, while with functions you have to call `Animal.prototype.speak.call(this)` manually.

### Summary table

| Difference | Class | Constructor function |
| --- | --- | --- |
| Call without `new` | `TypeError` | Works, but leads to bugs |
| Strict mode | Always on | Off by default |
| Hoisting | No | Yes |
| Methods enumerable | No | Yes |
| Inheritance syntax | Simple (`extends`, `super`) | Complex (`Object.create`, `call`) |
| Private fields | Yes (`#field`) | No |
| Readability | High | Low |

### Common mistakes
- Saying in an interview that "a class is just sugar" and stopping there. The behavioural differences (calls without `new`, strict mode, hoisting, enumerability) are exactly what is being tested.
- Confusing the lack of hoisting with the declaration not being hoisted at all: the class binding is hoisted but sits in the temporal dead zone, which is why you get a `ReferenceError` and not `is not defined`.
- Forgetting `Dog.prototype.constructor = Dog` in manual inheritance and then wondering why `instance.constructor` points at `Animal`.
- Treating `_field` in a constructor function as private. Real privacy exists only in class fields with `#`.
- Passing a class method as a callback and losing `this`: neither a class nor a constructor function binds the context for you.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.