Fresh object literals vs variable assignment behavior in Typescript - Visual Side-by-Side Comparison

Concept Flow - Fresh object literals vs variable assignment behavior

Create fresh object literal

↓

Assign to variable A

↓

Assign variable A to variable B

↓

Modify B's property

↓

Check A's property

↓

Are A and B same object?

↓

Change reflects

This flow shows creating a new object, assigning it to variables, modifying one, and checking if changes affect the other depending on whether they share the same object.

Execution Sample

Typescript

const a = { x: 1 };
const b = a;
b.x = 2;
console.log(a.x);
const c = { x: 1 };
c.x = 3;
console.log(c.x);

This code shows how assigning an object to another variable shares the same object, but creating a fresh object literal creates a new separate object.

Execution Table

Step	Action	Variable 'a'	Variable 'b'	Variable 'c'	Output
1	Create fresh object literal and assign to 'a'	{ x: 1 }	undefined	undefined
2	Assign 'a' to 'b' (both point to same object)	{ x: 1 }	{ x: 1 }	undefined
3	Modify 'b.x' to 2	{ x: 2 }	{ x: 2 }	undefined
4	Print 'a.x'	{ x: 2 }	{ x: 2 }	undefined	2
5	Create fresh object literal and assign to 'c'	{ x: 2 }	{ x: 2 }	{ x: 1 }	2
6	Modify 'c.x' to 3	{ x: 2 }	{ x: 2 }	{ x: 3 }	2
7	Print 'c.x'	{ x: 2 }	{ x: 2 }	{ x: 3 }	3

💡 Execution ends after printing values showing shared and fresh object behavior.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 5	After Step 6	Final
a	undefined	{ x: 1 }	{ x: 2 }	{ x: 2 }	{ x: 2 }	{ x: 2 }
b	undefined	{ x: 1 }	{ x: 2 }	{ x: 2 }	{ x: 2 }	{ x: 2 }
c	undefined	undefined	undefined	{ x: 1 }	{ x: 3 }	{ x: 3 }

Key Moments - 2 Insights

Why does changing 'b.x' also change 'a.x'?

Because 'b' was assigned from 'a', both variables point to the same object in memory, so modifying one affects the other (see execution_table step 3).

Why does changing 'c.x' not affect 'a.x' or 'b.x'?

'c' is assigned a fresh object literal, a new separate object, so changes to 'c' do not affect 'a' or 'b' (see execution_table steps 5 and 6).

Visual Quiz - 3 Questions

Look at the execution table at step 4, what is the value of 'a.x'?

A 1

B 2

C 3

D undefined

💡 Hint

Check the 'Output' column at step 4 in the execution_table.

At which step does variable 'c' get its initial object assigned?

A Step 5

B Step 3

C Step 2

D Step 6

💡 Hint

Look at the 'Action' and variable 'c' columns in the execution_table.

If we changed 'const b = a;' to 'const b = { ...a };', what would happen to 'a.x' after modifying 'b.x'?

A 'a.x' would change too

B 'b.x' would be undefined

C 'a.x' would stay the same

D Both 'a' and 'b' would be undefined

💡 Hint

Consider that '{ ...a }' creates a fresh object literal, so 'b' is a new object separate from 'a'.

Concept Snapshot

Fresh object literals create new objects in memory.
Assigning one variable to another copies the reference, not the object.
Modifying one variable's object affects all references to it.
Using spread syntax {...obj} creates a shallow copy, a fresh object.
Changes to a fresh object do not affect the original.

Full Transcript

This visual execution shows how fresh object literals and variable assignments behave in TypeScript. When you create a fresh object literal and assign it to a variable, that variable points to a new object in memory. If you assign that variable to another variable, both variables point to the same object. Changing a property through one variable changes it for the other too. However, if you create a fresh object literal separately, it is a different object. Changing it does not affect other variables. This is important to understand to avoid unexpected bugs when working with objects.