Platform under construction

Objects, Prototypes & Classes

Advanced

Object Management

Object management tools help you inspect, copy, freeze, merge and loop through object data safely.

const settings = { theme: "dark", compact: true };

console.log(Object.keys(settings));
console.log(Object.entries(settings));

Objects, Prototypes & Classes

JavaScript gives objects a practical inspection and control toolkit.

Object.keys, Object.values and Object.entries convert object structure into arrays, which makes objects easier to inspect and render.

Spread syntax and Object.assign can create shallow copies or merge objects. This is common in state updates and configuration defaults.

Object.freeze can prevent direct changes to an object. It is shallow, so nested objects are still mutable unless they are frozen too.

Object.keys

Returns an array of property names.

Object.values

Returns an array of property values.

Object.entries

Returns key-value pairs for loops and rendering.

Object.freeze

Prevents direct changes to an object.

Examples

Object code becomes clear when shape, state and behavior are visible.

Merge defaults into a new object

const defaults = { theme: "light", compact: false };
const input = { compact: true };

const settings = { ...defaults, ...input };

Mutating shared defaults

const defaults = { theme: "light", compact: false };

defaults.compact = true;

// Every caller using defaults now sees changed state.

Code patterns

Reusable examples for quick reference.

These patterns focus on the pieces developers actually reuse: object literals, methods, constructors, prototypes, getters, copying, classes and inheritance.

Keys

Read property names as an array.

const settings = { theme: "dark", compact: true };

console.log(Object.keys(settings));

Entries loop

Loop over key-value pairs.

const settings = { theme: "dark", compact: true };

for (const [key, value] of Object.entries(settings)) {
  console.log(key, value);
}

Merge defaults

Later properties overwrite earlier ones.

const defaults = { theme: "light", compact: false };
const userSettings = { theme: "dark" };

const settings = { ...defaults, ...userSettings };

Freeze object

Prevent direct mutation for a shallow object.

const settings = Object.freeze({
  theme: "dark",
  compact: true
});

Rules that matter

Model data deliberately before adding behavior.

Objects are where JavaScript programs start to model real application state. Good object shape makes later functions, classes and UI updates much easier to maintain.

Use entries for rendering

Key-value pairs are useful for tables and lists.

Copy before merging

Avoid changing shared configuration objects.

Remember spread is shallow

Nested objects are still shared.

Use freeze for simple constants

It protects direct writes on the object itself.

Use Object.hasOwn for ownership checks

It avoids prototype-chain confusion.

Keep object shapes stable

Consistent property names make code easier to optimize and read.

Production thinking

Object design decides how understandable the rest of the code can be.

Why does this matter?

Object management is where data becomes inspectable. These tools help transform object shape into arrays, UI and safe copies.

Accessibility

Rendering object entries can power clear definition lists or settings panels with proper labels.

Production note

Production code should avoid accidental mutation of defaults, shared config and imported constants.

SEO note

Stable content objects make metadata rendering predictable across pages.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Render Object.keys instead of Object.entries.
Add a nested object and explain why spread is shallow.
Freeze defaults and try to change it.

Practice assignment

Do this before moving to the next topic.

Use Object.keys on an object.
Loop over Object.entries.
Merge defaults and overrides into a new object.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Object Management.