Iterating over objects in Javascript - Step-by-Step Execution

Concept Flow - Iterating over objects

Start with object

↓

Get keys or entries

↓

Loop over keys/entries

↓

Access value for each key

↓

Use key and value

↓

Repeat until all keys done

↓

End

We start with an object, get its keys or entries, loop over them, access each value, and use them until all keys are processed.

Execution Sample

Javascript

const obj = {a: 1, b: 2};
for (const key in obj) {
  console.log(key, obj[key]);
}

This code loops over each key in the object and prints the key and its value.

Execution Table

Step	key	obj[key]	Action	Output
1	a	1	Access obj['a']	Print 'a 1'
2	b	2	Access obj['b']	Print 'b 2'
3	-	-	No more keys	Loop ends

💡 All keys in the object have been iterated, loop ends.

Variable Tracker

Variable	Start	After 1	After 2	Final
key	-	a	b	-
obj[key]	-	1	2	-

Key Moments - 2 Insights

Why does the loop use 'key' to access the value as obj[key] instead of obj.key?

Because 'key' is a variable holding the property name as a string, we must use bracket notation obj[key] to access the value dynamically. Dot notation obj.key looks for a property literally named 'key'. See execution_table steps 1 and 2.

Does the for...in loop guarantee the order of keys?

No, the for...in loop iterates over keys but the order is not guaranteed. It depends on the JavaScript engine. See execution_table where keys appear in order 'a', then 'b', but this is not always the case.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'key' at step 2?

A a

B obj

C b

D undefined

💡 Hint

Check the 'key' column in execution_table row for step 2.

At which step does the loop end according to the execution_table?

A Step 3

B Step 1

C Step 2

D Step 4

💡 Hint

Look for the row where 'No more keys' is the action.

If we replace 'for...in' with 'Object.keys(obj).forEach', how would the iteration change?

A It would iterate over values directly without keys.

B It would iterate over keys in the same order but keys are accessed via callback parameter.

C It would not iterate at all.

D It would iterate over keys but skip some keys.

💡 Hint

Object.keys returns an array of keys, so iteration order is preserved and keys are passed to the callback.

Concept Snapshot

Iterating over objects in JavaScript:
- Use for...in to loop keys: for (const key in obj) {}
- Access values with obj[key], not obj.key
- Order of keys is not guaranteed
- Alternative: Object.keys(obj).forEach(key => {})
- Use iteration to read or process each key-value pair

Full Transcript

This lesson shows how to loop over all keys in a JavaScript object using a for...in loop. We start with an object, get each key one by one, and access its value using bracket notation obj[key]. The loop runs until all keys are processed. We track the variable 'key' changing from 'a' to 'b' and print each key and value. Beginners often confuse obj[key] with obj.key; the first uses the variable key to access dynamic properties, while the second looks for a property literally named 'key'. The order of keys in for...in is not guaranteed. Alternatives like Object.keys(obj).forEach provide a way to iterate keys as an array. This visual trace helps understand each step and variable change during iteration.