Suggest an edit

Improve this article

Refine the answer for “Default values for properties”. 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. Through **Class Field Initialization**

The most modern and readable way (ES2022+):

```javascript
class User {
  name = "Anonymous";
  age = 18;

greet() {
    console.log(`Hi, I'm ${this.name}, I'm ${this.age}`);
  }
}

const u = new User();
u.greet(); // Hi, I'm Anonymous, I'm 18
```

**How this works:**

- Fields are initialized **before the constructor runs** (right after `this` is created).
- This is equivalent to assigning the values inside the constructor:

```javascript
  this.name = "Anonymous";
  this.age = 18;
  ```

You can also set **computed values**:

```javascript
class Product {
  id = Math.random();
  createdAt = new Date();
}
```

You can also use **values from constructor parameters**:

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

---

## 2. Through **Constructor Parameters With Default Values**

When values can be set at instance creation time:

```javascript
class User {
  constructor(name = "Guest", age = 18) {
    this.name = name;
    this.age = age;
  }
}

const u1 = new User();
const u2 = new User("Alice", 25);

console.log(u1); // { name: "Guest", age: 18 }
console.log(u2); // { name: "Alice", age: 25 }
```

This approach is convenient when the parameters are frequently overridden.

---

## 3. Through a **Parameter Object + Destructuring**

A very common technique in real projects,
especially when there are many properties and their order doesn't matter:

```javascript
class User {
  constructor({ name = "Guest", age = 18, city = "Kyiv" } = {}) {
    this.name = name;
    this.age = age;
    this.city = city;
  }
}

const u1 = new User();
const u2 = new User({ name: "Alice", city: "Lviv" });

console.log(u1); // { name: "Guest", age: 18, city: "Kyiv" }
console.log(u2); // { name: "Alice", age: 18, city: "Lviv" }
```

Convenient when the parameters can come in any order
or aren't always passed (for example, when loading from an API).

---

## 4. A Combined Approach (Often the Best Option)

You can combine class fields with constructor parameters:

```javascript
class Settings {
  theme = "light";
  language = "en";

constructor(options = {}) {
    Object.assign(this, options);
  }
}

const s1 = new Settings();
const s2 = new Settings({ theme: "dark" });

console.log(s1); // { theme: "light", language: "en" }
console.log(s2); // { theme: "dark", language: "en" }
```

This is convenient when you want to set **"base" values**,
but let the caller override them when creating an instance.

---

## 5. Through `static defaultProps` (a Rare Technique)

Sometimes a static property with a "default set" is used:

```javascript
class Config {
  static defaults = {
    apiUrl: "https://example.com",
    retryCount: 3,
  };

constructor(options = {}) {
    Object.assign(this, Config.defaults, options);
  }
}

const c = new Config({ retryCount: 5 });
console.log(c);
// { apiUrl: "https://example.com", retryCount: 5 }
```

Used when you need to keep a single default "global configuration".

---

## Comparison of Approaches

| Approach | Example | When to Use |
| --- | --- | --- |
| **Class fields** | `name = "Guest";` | Simple properties with a default |
| **Constructor parameters** | `constructor(name = "Guest")` | When defaults depend on input data |
| **Destructuring** | `constructor({ name = "Guest" } = {})` | Many options, order doesn't matter |
| **Combination (Object.assign)** | `Object.assign(this, defaults, opts)` | Flexibility and scalability |
| **Static defaultProps** | `static defaults = {...}` | When values are needed in multiple places |

---

## Brief Conclusion

> In a JS class, you can set default values:
>
> - right in the class body (`name = "Guest"`);
> - via constructor parameters (`constructor(name = "Guest")`);
> - via an object with destructuring (`constructor({ name = "Guest" } = {})`);
> - or by combining approaches for flexibility.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.