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.

Practice

1. In TypeScript, what happens when you assign an object variable to another variable using let b = a;?

easy

A. The original object is deleted.

B. A new copy of the object is created.

C. The object is converted to a string.

D. Both variables point to the same object in memory.

Solution

1. Step 1: Understand variable assignment with objects

   Assigning one object variable to another copies the reference, not the object itself.

2. Step 2: Effect of reference copying

   Both variables now point to the same object in memory, so changes via one affect the other.

3. Final Answer:

   Both variables point to the same object in memory. -> Option D

4. Quick Check:

   Object assignment copies reference = A [OK]

Hint: Assigning objects copies references, not objects themselves [OK]

Common Mistakes:

• Thinking a new object is created on assignment
• Assuming variables hold independent copies
• Confusing object assignment with primitive assignment

2. Which of the following is the correct way to create a fresh object literal in TypeScript?

easy

A. let obj = obj2;

B. let obj = Object.assign({});

C. let obj = { name: 'Alice' };

D. let obj = new Object(obj2);

Solution

1. Step 1: Identify fresh object literal syntax

   Using curly braces {} creates a new, fresh object literal.

2. Step 2: Check other options

   let obj = Object.assign({}); is incorrect because Object.assign({}) needs a source object to copy from; let obj = obj2; copies reference; let obj = new Object(obj2); creates an object but with a reference or unexpected behavior.

3. Final Answer:

   let obj = { name: 'Alice' }; -> Option C

4. Quick Check:

   Fresh object literal uses {} = A [OK]

Hint: Use curly braces {} to create fresh objects [OK]

Common Mistakes:

• Using assignment to copy objects instead of fresh literals
• Misusing Object.assign without source
• Confusing new Object() with fresh literal

3. What will be the output of this TypeScript code?

let a = { x: 1 };
let b = a;
b.x = 5;
console.log(a.x);

medium

A. 1

B. 5

C. undefined

D. Error

Solution

1. Step 1: Understand reference assignment

   Variable b points to the same object as a.

2. Step 2: Modify property via b

   Changing b.x to 5 changes the shared object property.

3. Step 3: Log a.x

   Since a and b reference the same object, a.x is now 5.

4. Final Answer:

   5 -> Option B

5. Quick Check:

   Shared reference means change visible = B [OK]

Hint: Changing one reference changes all pointing to same object [OK]

Common Mistakes:

• Expecting original object to remain unchanged
• Confusing object copying with reference assignment
• Assuming primitive copy behavior for objects

4. Identify the bug in this TypeScript code snippet:

let obj1 = { val: 10 };
let obj2 = obj1;
obj2 = { val: 20 };
console.log(obj1.val);

medium

A. obj2 assignment creates a new object, obj1 remains unchanged.

B. Both obj1 and obj2 point to the new object.

C. Syntax error due to reassignment.

D. obj1.val will be 20, which is unexpected.

Solution

1. Step 1: Analyze initial assignment

   obj2 initially points to the same object as obj1.

2. Step 2: Reassign obj2 to a new object

   obj2 now points to a fresh object; obj1 still points to the original.

3. Step 3: Check console output

   obj1.val remains 10 because obj1's reference did not change.

4. Final Answer:

   obj2 assignment creates a new object, obj1 remains unchanged. -> Option A

5. Quick Check:

   Reassignment changes reference, original unaffected = D [OK]

Hint: Reassigning variable changes reference, original object stays same [OK]

Common Mistakes:

• Thinking obj1 changes when obj2 is reassigned
• Confusing property change with variable reassignment
• Expecting both variables to point to new object

5. You want to create two independent objects in TypeScript so that changing one does not affect the other. Which code snippet achieves this correctly?

const obj1 = { a: 1 };
const obj2 = ???
obj2.a = 5;
console.log(obj1.a);

hard

A. obj2 = { ...obj1 };

B. obj2 = Object.assign(obj1);

C. obj2 = obj1;

D. obj2 = obj1 as any;

Solution

1. Step 1: Understand shallow copy with spread operator

   Using { ...obj1 } creates a fresh object with copied properties.

2. Step 2: Check other options

   obj2 = obj1; copies reference; obj2 = Object.assign(obj1); is incorrect usage of Object.assign; obj2 = obj1 as any; is just a type assertion, no copy.

3. Step 3: Confirm independence

   Changing obj2.a does not affect obj1.a.

4. Final Answer:

   obj2 = { ...obj1 }; -> Option A

5. Quick Check:

   Spread operator creates fresh object copy = C [OK]

Hint: Use spread {...obj} to copy objects independently [OK]

Common Mistakes:

• Assigning reference instead of copying
• Misusing Object.assign without target
• Confusing type assertion with copying