Default values for properties
1. Through Class Field Initialization
The most modern and readable way (ES2022+):
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 18How this works:
-
Fields are initialized before the constructor runs (right after
thisis created). -
This is equivalent to assigning the values inside the constructor:
javascriptthis.name = "Anonymous"; this.age = 18;
You can also set computed values:
class Product {
id = Math.random();
createdAt = new Date();
}You can also use values from constructor parameters:
class User {
constructor(name = "Anonymous") {
this.name = name;
}
}2. Through Constructor Parameters With Default Values
When values can be set at instance creation time:
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:
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:
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:
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.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.