Adding and removing properties in Javascript - Step-by-Step Execution

Concept Flow - Adding and removing properties

Start with object

↓

Add property: obj.key = value

↓

Check object properties

↓

Remove property: delete obj.key

↓

Check object properties again

↓

End

We start with an object, add a property, check it, then remove the property and check again.

Execution Sample

Javascript

const obj = {};
obj.name = "Alice";
delete obj.name;
console.log(obj);

This code creates an empty object, adds a 'name' property, removes it, then prints the object.

Execution Table

Step	Code executed	Object state	Explanation
1	const obj = {};	{}	Created an empty object with no properties.
2	obj.name = "Alice";	{"name": "Alice"}	Added property 'name' with value 'Alice'.
3	delete obj.name;	{}	Removed property 'name' from the object.
4	console.log(obj);	{}	Printed the object, now empty again.

💡 All steps executed; object ends empty after adding and removing property.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
obj	{}	{"name": "Alice"}	{}	{}

Key Moments - 2 Insights

Why does the object become empty after deleting the property?

Because deleting the property removes it completely from the object, as shown in step 3 of the execution_table where the object state changes from having 'name' to being empty.

Can we add a property using dot notation like obj.name = value?

Yes, as shown in step 2, dot notation adds a new property to the object easily.

Visual Quiz - 3 Questions

Look at the execution_table, what is the object state after step 2?

A {"age": 30}

B {"name": "Alice"}

C {}

D undefined

💡 Hint

Check the 'Object state' column for step 2 in the execution_table.

At which step does the object lose the 'name' property?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look at the 'Code executed' and 'Object state' columns in the execution_table.

If we skip the delete line, what would console.log(obj) show?

A {}

B undefined

C {"name": "Alice"}

D Error

💡 Hint

Refer to the object state after step 2 in the execution_table.

Concept Snapshot

Adding properties: obj.key = value
Removing properties: delete obj.key
Adding creates or updates a property
Deleting removes the property completely
Object reflects changes immediately

Full Transcript

We start with an empty object. Then we add a property 'name' with value 'Alice' using dot notation. The object now has one property. Next, we remove the 'name' property using the delete keyword. The object becomes empty again. Finally, we print the object to see it is empty. This shows how to add and remove properties in JavaScript objects.