Object entries in Javascript - Step-by-Step Execution

Concept Flow - Object entries

Start with an object

↓

Call Object.entries(obj)

↓

Iterate over each key-value pair

↓

Create array of [key, value

↓

Return the array

This flow shows how Object.entries takes an object and returns an array of key-value pairs.

Execution Sample

Javascript

const obj = {a: 1, b: 2};
const entries = Object.entries(obj);
console.log(entries);

This code converts an object into an array of its key-value pairs and prints it.

Execution Table

Step	Action	Object State	Result	Output
1	Define obj	{a: 1, b: 2}	Object created
2	Call Object.entries(obj)	{a: 1, b: 2}	Array of entries created	[['a', 1], ['b', 2]]
3	Print entries	[['a', 1], ['b', 2]]	Output to console	[['a', 1], ['b', 2]]

💡 All object entries processed and output printed.

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
obj	undefined	{a: 1, b: 2}	{a: 1, b: 2}	{a: 1, b: 2}
entries	undefined	undefined	[['a', 1], ['b', 2]]	[['a', 1], ['b', 2]]

Key Moments - 3 Insights

Why does Object.entries return an array of arrays instead of an object?

Object.entries returns an array because it represents each key-value pair as a two-element array, making it easy to iterate over with loops like for...of. This is shown in execution_table step 2 where the result is an array of [key, value] pairs.

Does Object.entries include inherited properties?

No, Object.entries only includes the object's own enumerable properties, not inherited ones. This is why the object state in execution_table step 1 matches exactly the entries in step 2.

What happens if the object is empty?

If the object is empty, Object.entries returns an empty array. This means no entries to iterate over, similar to execution_table but with an empty result array.

Visual Quiz - 3 Questions

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

A [['a', 1], ['b', 2]]

B {a: 1, b: 2}

C undefined

D ['a', 'b']

💡 Hint

Check the 'Result' and 'Output' columns in execution_table row for step 2.

At which step is the array of key-value pairs created?

A Step 1

B Step 3

C Step 2

D Never

💡 Hint

Look at the 'Action' and 'Result' columns in execution_table to find when Object.entries is called.

If the object had an inherited property, would it appear in the entries array?

A Yes, all properties appear

B No, only own enumerable properties appear

C Only inherited properties appear

D Only non-enumerable properties appear

💡 Hint

Refer to key_moments about inherited properties and execution_table step 2.

Concept Snapshot

Object.entries(obj) returns an array of [key, value] pairs from obj.
Only own enumerable properties are included.
Useful for looping over object entries.
Result is an array of arrays.
Example: {a:1} → [['a',1]]

Full Transcript

We start with an object that has some properties. When we call Object.entries on it, JavaScript creates an array where each element is a two-item array: the key and its value. This array is easy to loop over or use in other array methods. The entries only include the object's own properties, not those inherited from its prototype. Finally, printing the entries shows the array of key-value pairs.

Practice

1. What does Object.entries(obj) return when used on an object obj?

easy

A. A new object with the same keys and values

B. An array of values only

C. An array of keys only

D. An array of [key, value] pairs from the object

Solution

1. Step 1: Understand Object.entries behavior

   Object.entries takes an object and returns an array where each element is a two-item array: the key and its corresponding value.

2. Step 2: Compare options to definition

   Only An array of [key, value] pairs from the object correctly describes this output as an array of [key, value] pairs. Options A, C, and D describe different outputs.

3. Final Answer:

   An array of [key, value] pairs from the object -> Option D

4. Quick Check:

   Object.entries = array of [key, value] pairs [OK]

Hint: Remember: entries give key-value pairs as arrays [OK]

Common Mistakes:

• Thinking it returns an object
• Confusing entries with keys or values only
• Expecting a flat array instead of pairs

2. Which of the following is the correct syntax to get entries from an object data?

easy

A. entries(Object.data)

B. Object.entries(data)

C. Object.entry(data)

D. data.entries()

Solution

1. Step 1: Recall the correct method name and usage

   The correct method is Object.entries() called with the object as argument.

2. Step 2: Check each option

   Object.entries(data) uses the correct syntax. data.entries() is invalid because objects don't have an entries() method. Object.entry(data) uses a wrong method name. entries(Object.data) has incorrect syntax.

3. Final Answer:

   Object.entries(data) -> Option B

4. Quick Check:

   Correct method is Object.entries(obj) [OK]

Hint: Use Object.entries(obj), not obj.entries() [OK]

Common Mistakes:

• Calling entries as a method on the object
• Misspelling 'entries' as 'entry'
• Passing object incorrectly

3. What is the output of this code?

const obj = {a: 1, b: 2};
console.log(Object.entries(obj));

medium

A. ['a', 'b']

B. [['1', 'a'], ['2', 'b']]

C. [['a', 1], ['b', 2]]

D. [1, 2]

Solution

1. Step 1: Apply Object.entries to the object

   Object.entries returns an array of arrays, each inner array has the key and value from the object.

2. Step 2: Match output to options

   For obj = {a:1, b:2}, output is [['a', 1], ['b', 2]] which matches [['a', 1], ['b', 2]] exactly.

3. Final Answer:

   [['a', 1], ['b', 2]] -> Option C

4. Quick Check:

   Object.entries(obj) = [['a', 1], ['b', 2]] [OK]

Hint: Entries output is array of [key, value] pairs [OK]

Common Mistakes:

• Swapping keys and values
• Expecting a flat array of keys or values
• Confusing output format with JSON string

4. Find the error in this code snippet:

const user = {name: 'Alice', age: 25};
for (const [key, value] of user.entries()) {
  console.log(key, value);
}

medium

A. user.entries() is not a function

B. Missing curly braces in for loop

C. Destructuring syntax is incorrect

D. Console.log syntax error

Solution

1. Step 1: Identify method usage on object

   Plain objects do not have an entries() method; Object.entries() is a static method on Object.

2. Step 2: Correct usage

   To iterate entries, use for (const [key, value] of Object.entries(user)) instead of user.entries().

3. Final Answer:

   user.entries() is not a function -> Option A

4. Quick Check:

   Objects lack entries() method; use Object.entries(obj) [OK]

Hint: Use Object.entries(obj), not obj.entries() [OK]

Common Mistakes:

• Calling entries() directly on object
• Confusing Object.entries with instance method
• Ignoring error message about missing function

5. Given const data = {x: 10, y: 0, z: null, w: 'hello'}, which code snippet correctly creates a new object with only entries having truthy values?

hard

A. Object.fromEntries(Object.entries(data).filter(([k, v]) => v))

B. Object.entries(data).filter(([k, v]) => v)

C. Object.entries(data).map(([k, v]) => v && [k, v])

D. Object.fromEntries(data.filter(([k, v]) => v))

Solution

1. Step 1: Filter entries with truthy values

   Use Object.entries(data) to get pairs, then filter pairs where value is truthy (non-zero, non-null, non-false).

2. Step 2: Convert filtered entries back to object

   Use Object.fromEntries() on filtered array to create new object with only truthy values.

3. Final Answer:

   Object.fromEntries(Object.entries(data).filter(([k, v]) => v)) -> Option A

4. Quick Check:

   Filter entries then fromEntries to object [OK]

Hint: Filter entries then use Object.fromEntries to rebuild object [OK]

Common Mistakes:

• Forgetting to convert back to object
• Using map instead of filter
• Trying to call filter on object directly