Object entries in Javascript - Deep Dive

Overview - Object entries

What is it?

Object entries is a way to get all the key-value pairs from an object as an array of arrays. Each inner array has two items: the key and its matching value. This helps you look at or work with all parts of an object easily. It's like turning an object into a list of pairs you can loop over or change.

Why it matters

Without object entries, you would have to get keys and values separately or write extra code to access both at once. This makes working with objects slower and more complicated. Object entries lets you quickly see and use all the data inside an object, which is very common in programming tasks like filtering, transforming, or displaying data.

Where it fits

Before learning object entries, you should understand what objects are and how to access their properties. After this, you can learn about object methods like Object.keys and Object.values, and then move on to advanced topics like destructuring, maps, and working with JSON data.

Mental Model

Core Idea

Object entries turns an object into a list of [key, value] pairs so you can easily work with both parts together.

Think of it like...

Imagine a filing cabinet where each drawer has a label (key) and contains some papers (value). Object entries is like opening the cabinet and making a list of all drawer labels with their papers side by side.

Object {
  key1: value1,
  key2: value2
}
  ↓ Object.entries()
[
  ["key1", value1],
  ["key2", value2]
]

Build-Up - 7 Steps

1

Foundation

Understanding JavaScript objects basics

Concept: Learn what objects are and how they store data as key-value pairs.

In JavaScript, an object is a collection of properties. Each property has a name (key) and a value. For example: const person = { name: "Alice", age: 30 }; Here, 'name' and 'age' are keys, and 'Alice' and 30 are their values.

Result

You can access values by their keys, like person.name gives "Alice".

Knowing that objects store data as keys and values is the foundation for using Object.entries.

2

Foundation

Accessing object keys and values separately

Concept: Learn how to get just the keys or just the values from an object.

JavaScript provides Object.keys() to get all keys as an array, and Object.values() to get all values as an array. Example: const person = { name: "Alice", age: 30 }; Object.keys(person); // ["name", "age"] Object.values(person); // ["Alice", 30]

Result

You get two separate arrays: one with keys, one with values.

Getting keys and values separately is useful but can be inconvenient when you want to work with both together.

3

Intermediate

Using Object.entries to get key-value pairs

🤔Before reading on: do you think Object.entries returns an object or an array? Commit to your answer.

Concept: Object.entries returns an array of arrays, each inner array holding a key and its value from the object.

Example: const person = { name: "Alice", age: 30 }; const entries = Object.entries(person); console.log(entries); // Output: [["name", "Alice"], ["age", 30]]

Result

You get an array where each item is a two-element array: [key, value].

Understanding that Object.entries returns pairs together lets you loop over both keys and values easily.

4

Intermediate

Looping over entries with for...of

🤔Before reading on: do you think you can use for...in or for...of to loop over Object.entries output? Commit to your answer.

Concept: You can use for...of to loop over the array of entries and access keys and values directly.

Example: const person = { name: "Alice", age: 30 }; for (const [key, value] of Object.entries(person)) { console.log(`${key}: ${value}`); } // Output: // name: Alice // age: 30

Result

You print each key and its value in a simple loop.

Using destructuring in the loop makes working with entries clean and readable.

5

Intermediate

Filtering object properties with Object.entries

🤔Before reading on: can you filter an object by value using Object.entries? Commit to your answer.

Concept: You can convert an object to entries, filter the entries, then convert back to an object.

Example: const person = { name: "Alice", age: 30, city: "NY" }; const filteredEntries = Object.entries(person).filter(([key, value]) => typeof value === 'string'); const filteredObject = Object.fromEntries(filteredEntries); console.log(filteredObject); // Output: { name: "Alice", city: "NY" }

Result

You get a new object with only string values.

Object.entries combined with Object.fromEntries allows powerful object transformations.

6

Advanced

Handling non-enumerable and inherited properties

🤔Before reading on: does Object.entries include inherited or non-enumerable properties? Commit to your answer.

Concept: Object.entries only includes an object's own enumerable string-keyed properties, excluding inherited and non-enumerable ones.

Example: const parent = { inherited: 'yes' }; const child = Object.create(parent); child.own = 'no'; console.log(Object.entries(child)); // Output: [['own', 'no']] // 'inherited' is not included because it's from the prototype. Also, non-enumerable properties are skipped.

Result

Only own enumerable properties appear in Object.entries output.

Knowing this prevents bugs when expecting inherited or hidden properties to appear.

7

Expert

Performance and pitfalls with large objects

🤔Before reading on: do you think Object.entries creates a new array copy or references the original object? Commit to your answer.

Concept: Object.entries creates a new array copy of key-value pairs, which can impact performance with very large objects.

Because Object.entries builds a new array, using it repeatedly on large objects can slow down your program and use more memory. Also, changes to the original object after calling Object.entries do not affect the returned array. Example: const bigObj = {}; for(let i=0; i<100000; i++) { bigObj['key'+i] = i; } const entries = Object.entries(bigObj); // entries is a new array with 100000 pairs Modifying bigObj after this won't change entries.

Result

You get a snapshot copy of entries at call time, not a live view.

Understanding this helps avoid unexpected bugs and performance issues in large-scale applications.

Under the Hood

When you call Object.entries, JavaScript engine iterates over the object's own enumerable string-keyed properties in insertion order. For each property, it creates a two-element array with the key and value, then collects these arrays into a new array. This new array is returned. The original object remains unchanged. The process skips inherited and non-enumerable properties because they are not part of the object's own enumerable keys.

Why designed this way?

Object.entries was introduced to provide a simple, standardized way to get both keys and values together, improving on older methods that required separate calls or manual looping. It was designed to work only with own enumerable properties to keep behavior predictable and consistent with other object iteration methods like Object.keys and Object.values. This design avoids confusion from inherited or hidden properties and matches common use cases.

Object {
  key1: value1
  key2: value2
}
   │
   ├─> Iterate own enumerable keys in order
   │
   ├─> For each key, create [key, value] array
   │
   └─> Collect all pairs into new array

Result: [ [key1, value1], [key2, value2] ]

Myth Busters - 4 Common Misconceptions

Quick: Does Object.entries include properties from the object's prototype chain? Commit to yes or no.

Common Belief: Object.entries returns all properties including inherited ones.

Reality: Object.entries only returns the object's own enumerable properties, excluding inherited ones.

Why it matters: Assuming inherited properties appear can cause bugs when code misses expected data or processes unexpected keys.

Quick: Does Object.entries return a live view of the object or a snapshot copy? Commit to your answer.

Common Belief: Object.entries returns a live view that updates if the object changes.

Reality: Object.entries returns a new array snapshot at the time of the call; later changes to the object do not affect it.

Why it matters: Expecting live updates can cause stale data bugs if the object changes after calling Object.entries.

Quick: Can Object.entries be used on objects with symbol keys? Commit yes or no.

Common Belief: Object.entries returns entries for all keys, including symbols.

Reality: Object.entries only returns entries for string-keyed properties, not symbol-keyed ones.

Why it matters: Missing symbol keys can cause incomplete data processing in advanced use cases.

Quick: Does Object.entries preserve the order of keys? Commit yes or no.

Common Belief: Object.entries returns entries in random or insertion order that can vary.

Reality: Object.entries returns entries in the order of the object's own enumerable properties, which follows insertion order for string keys.

Why it matters: Knowing order is preserved helps when order matters, like displaying data or comparing objects.

Expert Zone

1

Object.entries does not include non-enumerable properties, which can be important when debugging or inspecting objects with hidden data.

2

The order of entries matches the order of keys as defined by the ECMAScript specification, which can differ from insertion order for integer-like keys.

3

Using Object.entries with Object.fromEntries allows elegant transformations, but beware of performance costs on very large objects.

When NOT to use

Avoid Object.entries when you need to include symbol-keyed or non-enumerable properties; use Reflect.ownKeys or Object.getOwnPropertyDescriptors instead. Also, for very large objects where performance is critical, consider alternative data structures like Maps or custom iteration to avoid copying all entries.

Production Patterns

In real-world code, Object.entries is often used to transform objects into arrays for filtering, mapping, or reducing data. It's common in React for rendering lists from objects, in data processing pipelines to clean or reshape data, and in configuration management to dynamically read and modify settings.

Connections

Map data structure

Similar pattern of storing key-value pairs but with guaranteed order and support for any key type.

Understanding Object.entries helps grasp how Maps store and iterate key-value pairs, bridging object and map usage.

Relational database tables

Object entries resemble rows of key-value pairs, similar to columns and values in a database record.

Seeing objects as collections of entries helps relate programming data structures to database tables and querying.

Dictionary data type in Python

Both represent key-value collections and have methods to get items as pairs.

Knowing Object.entries clarifies how Python's dict.items() works, showing cross-language data handling similarities.

Common Pitfalls

#1 Trying to use Object.entries on null or undefined values.

Wrong approach:

Object.entries(null);
// Throws TypeError: Cannot convert undefined or null to object

Correct approach:

const obj = null;
if (obj !== null && obj !== undefined) {
Object.entries(obj);
} else {
// handle null or undefined case
}

Root cause:

Object.entries expects a valid object; null or undefined are not objects and cause errors.

#2 Assuming Object.entries includes symbol-keyed properties.

Wrong approach:

const sym = Symbol('id');
const obj = { [sym]: 123, name: 'Alice' };
console.log(Object.entries(obj));
// Output: [['name', 'Alice']] (missing symbol key)

Correct approach:

const sym = Symbol('id');
const obj = { [sym]: 123, name: 'Alice' };
console.log(Object.getOwnPropertySymbols(obj));
// Output: [Symbol(id)]

Root cause:

Object.entries only works with string keys, ignoring symbol keys.

#3 Modifying the object while looping over Object.entries output expecting changes to reflect immediately.

Wrong approach:

const obj = { a: 1, b: 2 };
for (const [key, value] of Object.entries(obj)) {
obj[key] = value + 1;
console.log(obj[key]);
}
// Output: 2, 3
// But entries array is fixed snapshot

Correct approach:

const obj = { a: 1, b: 2 };
const entries = Object.entries(obj);
for (const [key, value] of entries) {
obj[key] = value + 1;
console.log(obj[key]);
}

Root cause:

Object.entries returns a snapshot array; modifying the object does not change the entries array during iteration.

Key Takeaways

Object.entries converts an object into an array of [key, value] pairs, making it easy to work with both parts together.

It only includes the object's own enumerable string-keyed properties, excluding inherited, non-enumerable, and symbol keys.

Using Object.entries with loops and destructuring simplifies accessing keys and values simultaneously.

Combining Object.entries with Object.fromEntries enables powerful object transformations like filtering and mapping.

Be aware that Object.entries returns a new array snapshot, so changes to the original object after calling it do not affect the entries.

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