Suggest an edit

Improve this article

Refine the answer for “Class as an expression const A = class {}”. 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

You can declare a class **in two ways**:

### Class Declaration

```javascript
class User {
  greet() {
    console.log("Hi!");
  }
}
```

### Class Expression

```javascript
const User = class {
  greet() {
    console.log("Hi!");
  }
};
```

Both create a **class**, the only difference is **where and how it is declared**.

---

## 2. Anonymous and Named Expressions

A class expression can be **anonymous** or **named**.

### Anonymous:

```javascript
const User = class {
  greet() {
    console.log("Hi!");
  }
};
```

### Named:

```javascript
const User = class MyUser {
  greet() {
    console.log(MyUser.name); // "MyUser"
  }
};

const u = new User();
u.greet(); // MyUser
```

> The name `MyUser` **is visible only inside the class itself**,
> outside of it only the `User` variable is accessible.

```javascript
console.log(typeof MyUser); // ReferenceError
```

---

## 3. Where This Is Useful

### 1. When You Need to Create a Class Dynamically

For example, depending on a condition:

```javascript
const Animal = condition
  ? class Dog {
      bark() { console.log("Woof!"); }
    }
  : class Cat {
      meow() { console.log("Meow!"); }
    };

const pet = new Animal();
```

---

### 2. When You Need to Return a Class From a Function (a Class Factory)

```javascript
function createModel(name) {
  return class {
    constructor(id) {
      this.id = id;
      this.modelName = name;
    }
  };
}

const UserModel = createModel("User");
const user = new UserModel(1);

console.log(user.modelName); // "User"
```

> Very convenient for dynamically creating models, entities, adapters, and so on.

---

### 3. When the Class Should Be Local (Inside a Function)

```javascript
function makeCounter() {
  return class {
    #count = 0;
    inc() { this.#count++; return this.#count; }
  };
}

const Counter = makeCounter();
const c = new Counter();
console.log(c.inc()); // 1
```

The class lives **only inside the function**, without polluting the global scope.

---

## 4. Hoisting Behavior

- A **class declaration** is not hoisted (like a function is).
- A **class expression** behaves like any `const` variable, it's available **only after it's declared**.

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

---

## 5. Can Be Used as a Value (Inline)

```javascript
console.log(
  new (class {
    sayHi() {
      console.log("Hi!");
    }
  })()
); // { ... }: an instance of a temporary class
```

> This trick is often used in tests and demos,
> there's no need to clutter the code with a separate class name.

---

## Summary

| Type | Example | Where the Name Is Available | Hoisted? |
| --- | --- | --- | --- |
| **Class Declaration** | `class User {}` | Everywhere after it's declared | No |
| **Anonymous Class Expression** | `const A = class {}` | No name | No |
| **Named Class Expression** | `const A = class MyA {}` | Only inside the class | No |

---

**Conclusion:**

- Yes, a class can be used as an expression (`const A = class {}`).
- This is useful for **dynamic, local, or temporary classes**.
- Unlike a declaration, the class name in this case **can be local or missing entirely**.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.