Creating Objects in JavaScript
Introduction
JavaScript offers several ways to create objects—literals, constructors, Object.create, and factory functions. This chapter focuses on patterns beginners use daily and previews constructors for later study. Choosing a clear creation style keeps modules and APIs easy to read.
Prerequisites
Object Literals (Most Common)
// Product record
const product = {
sku: "NB-001",
title: "Notebook",
price: 4.5,
inStock: true,
};
console.log(product);Add properties later:
// Add new property
product.tags = ["stationery", "school"];
console.log(product.tags);Constructor Function + new (Classic)
// Constructor function
function User(name, role) {
this.name = name;
this.role = role;
this.active = true;
}
const admin = new User("Ada", "admin");
console.log(admin.name, admin.role);Prefer classes (syntactic sugar over prototypes) in modern code—covered in OOP chapters.
Class Syntax (Modern)
// ES6 class
class User {
constructor(name, role) {
this.name = name;
this.role = role;
}
describe() {
return `${this.name} (${this.role})`;
}
}
const editor = new User("Lin", "editor");
console.log(editor.describe());Factory Function (No new)
Returns a new object each call—simple and explicit:
// Factory returns plain object
function createPoint(x, y) {
return { x, y };
}
const p = createPoint(3, 4);
console.log(p);Good for small helpers without prototype chains.
Object.create
Creates an object with a specific prototype:
// Object with prototype chain
const proto = { greet() { return `Hi, ${this.name}`; } };
const person = Object.create(proto);
person.name = "Sam";
console.log(person.greet());Useful for advanced patterns; literals + classes cover most app code.
Object Spread for Shallow Copies
// Clone and merge with spread
const defaults = { theme: "light", lang: "en" };
const userPrefs = { theme: "dark" };
const settings = { ...defaults, ...userPrefs };
console.log(settings);Spread creates a shallow copy—nested objects are still shared unless deep-cloned.
Mini Example: Build a Config Object
// Layer defaults and environment overrides
const baseConfig = {
apiBase: "https://api.example.com",
timeoutMs: 5000,
retries: 2,
};
const envOverride = {
timeoutMs: 8000,
debug: true,
};
const runtimeConfig = {
...baseConfig,
...envOverride,
builtAt: new Date().toISOString(),
};
console.log(runtimeConfig);FAQ
Which creation style should I use?
Literals for one-off records. Classes for reusable entity types. Factories for simple helpers without new.
Does new work on arrow functions?
No—use function declarations/expressions or classes as constructors.
Are class fields private?
Modern JS supports #privateField syntax—advanced; public fields are default in learning projects.
What comes next?
Object properties—read, update, delete, and test keys.