Platform under construction

Values & Types

Intermediate

Objects vs Primitives

Primitives are copied as values. Objects are passed around by reference, which means two names can point to the same mutable object.

const a = { tasks: 12 };
const b = a;

b.tasks = 13;
console.log(a.tasks); // 13

Values & Types

Objects and primitives behave differently when assigned, compared and changed.

When you assign a primitive value to another variable, the value is copied. Changing the new variable does not change the old one.

When you assign an object to another variable, the object itself is not copied. The new variable points to the same object. Mutating the object through either name changes what both names see.

This reference behavior is powerful and normal, but it is also the source of many bugs in state management, UI updates and data processing.

Primitive copy

Strings, numbers, booleans and other primitives behave like independent values.

Object reference

Objects, arrays, functions and dates are reference values.

Mutation

Changing a property changes the object itself.

Copying objects

Use spread, structuredClone or deliberate mapping depending on depth and intent.

Examples

Good type handling makes JavaScript predictable.

Copy before changing when you need independence

const originalUser = { name: "User A", tasks: 12 };
const updatedUser = { ...originalUser, tasks: 13 };

console.log(originalUser.tasks); // 12
console.log(updatedUser.tasks); // 13

Accidental shared mutation

const originalUser = { name: "User A", tasks: 12 };
const updatedUser = originalUser;

updatedUser.tasks = 13;

console.log(originalUser.tasks); // 13

Rules that matter

Types are not paperwork. They are behavior.

JavaScript lets values move flexibly, but professional code keeps meaning clear. Convert at boundaries, validate input and choose values that represent the real idea.

Know what you copied

Primitive assignment copies the value. Object assignment copies the reference.

Compare objects carefully

{} === {} is false because they are different object references.

Use spread for shallow copies

Spread is useful, but nested objects still need deeper handling.

Avoid hidden mutation

Functions that mutate arguments should be clearly named or avoided.

Use const for stable references

const can keep the same object reference while the object properties still change.

Choose immutable patterns for UI state

Independent updates are easier to reason about in interactive interfaces.

Production thinking

Data quality starts with value quality.

Why does this matter?

Reference behavior explains a huge percentage of JavaScript bugs. Once you see references, objects stop feeling mysterious.

Accessibility

UI state objects often control text, focus and visibility. Accidental mutation can show stale or incorrect feedback.

Production note

Production code should make mutation intentional. State bugs are expensive because they often appear only after several interactions.

SEO note

If shared state corrupts rendered content, pages can show wrong titles, links or structured data.

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.

Replace const shared = original with a spread copy.
Add a nested object and see why shallow copying has limits.
Compare original === shared before and after changing the copy style.

Practice assignment

Do this before moving to the next topic.

Create two variables pointing to the same object.
Mutate the object through the second variable.
Rewrite the example with a shallow copy.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Objects vs Primitives.