Object keys and values in Javascript - Step-by-Step Execution

Concept Flow - Object keys and values

Start with an object

↓

Get keys using Object.keys(obj)

↓

Get values using Object.values(obj)

↓

Use keys and values as arrays

↓

End

We start with an object, then extract its keys and values as arrays to use them separately.

Execution Sample

Javascript

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

This code gets the keys and values from an object and prints them.

Execution Table

Step	Action	Expression	Result
1	Create object	const obj = {a: 1, b: 2};	{a: 1, b: 2}
2	Get keys	Object.keys(obj)	['a', 'b']
3	Get values	Object.values(obj)	[1, 2]
4	Print keys	console.log(keys)	['a', 'b']
5	Print values	console.log(values)	[1, 2]

💡 All keys and values extracted and printed.

Variable Tracker

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

Key Moments - 2 Insights

Why do Object.keys(obj) and Object.values(obj) return arrays?

Because keys and values are multiple items, JavaScript groups them into arrays for easy use, as shown in steps 2 and 3.

Are the keys and values always in the same order?

Yes, Object.keys and Object.values return arrays where the order of keys matches the order of values, so keys[i] corresponds to values[i]. See steps 2 and 3.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'keys' after step 2?

A ['a', 'b']

B [1, 2]

C {a:1, b:2}

D undefined

💡 Hint

Check the 'Result' column for step 2 in the execution_table.

At which step do we get the array of values from the object?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look for Object.values(obj) in the 'Expression' column.

If the object had a new key 'c: 3', how would the 'keys' array change after step 2?

A ['a', 'b']

B ['a', 'b', 'c']

C ['c', 'a', 'b']

D [1, 2, 3]

💡 Hint

Object.keys returns keys in insertion order, see variable_tracker for keys array.

Concept Snapshot

Object.keys(obj) returns an array of all keys in obj.
Object.values(obj) returns an array of all values in obj.
Keys and values arrays have matching order.
Use these to loop or access keys/values separately.
Example: keys = Object.keys(obj); values = Object.values(obj);

Full Transcript

We start with an object that has keys and values. Using Object.keys, we get an array of the keys. Using Object.values, we get an array of the values. Both arrays keep the same order so each key matches its value by position. We print these arrays to see the keys and values separately. This helps when you want to work with keys or values alone.

Practice

1. Which method returns an array of all the keys in a JavaScript object?
const obj = {a: 1, b: 2};

easy

A. Object.values(obj)

B. Object.entries(obj)

C. Object.keys(obj)

D. Object.get(obj)

Solution

1. Step 1: Understand Object.keys()

   Object.keys() returns an array of the object's own enumerable property names (keys).

2. Step 2: Compare with other methods

   Object.values() returns values, Object.entries() returns key-value pairs, Object.get() is not a valid method.

3. Final Answer:

   Object.keys(obj) -> Option C

4. Quick Check:

   Keys = Object.keys(obj) [OK]

Hint: Keys come from Object.keys(), values from Object.values() [OK]

Common Mistakes:

• Confusing Object.keys() with Object.values()
• Using Object.entries() to get only keys
• Trying to use Object.get() which doesn't exist

2. Which of the following is the correct syntax to get all values from an object const obj = {x: 10, y: 20};?

easy

A. Object.values(obj)

B. obj.values()

C. Object.keys(obj)

D. Object.getValues(obj)

Solution

1. Step 1: Identify the method for values

   Object.values(obj) returns an array of the object's values.

2. Step 2: Check syntax validity

   obj.values() and Object.getValues() are not valid JavaScript methods.

3. Final Answer:

   Object.values(obj) -> Option A

4. Quick Check:

   Values = Object.values(obj) [OK]

Hint: Use Object.values() to get all values from an object [OK]

Common Mistakes:

• Using Object.keys() instead of Object.values()
• Calling values() directly on the object
• Using non-existent Object.getValues() method

3. What will be the output of the following code?

const obj = {a: 5, b: 10};
console.log(Object.keys(obj));

medium

A. ['a', 'b']

B. ['5', '10']

C. [5, 10]

D. ['obj', 'keys']

Solution

1. Step 1: Understand Object.keys() output

   Object.keys(obj) returns an array of the keys, which are 'a' and 'b'.

2. Step 2: Check the console.log output

   The console will print ['a', 'b'] as the keys array.

3. Final Answer:

   ['a', 'b'] -> Option A

4. Quick Check:

   Keys = ['a', 'b'] [OK]

Hint: Object.keys() returns keys as strings in an array [OK]

Common Mistakes:

• Confusing keys with values
• Expecting numeric values instead of string keys
• Misreading the output as property values

4. Find the error in the following code:

const data = {name: 'Alice', age: 25};
const keys = data.keys();
console.log(keys);

medium

A. No error, code works fine

B. data.keys() returns undefined

C. data.keys() returns an array of values

D. data.keys() is not a function

Solution

1. Step 1: Check method existence on object

   Plain objects do not have a keys() method; Object.keys() is a static method.

2. Step 2: Identify the error type

   Calling data.keys() causes a TypeError: data.keys is not a function.

3. Final Answer:

   data.keys() is not a function -> Option D

4. Quick Check:

   data.keys() causes TypeError [OK]

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

Common Mistakes:

• Calling keys() directly on object instance
• Confusing Object.keys() with instance method
• Expecting keys() to return values

5. Given the object const scores = {alice: 10, bob: 15, charlie: 0, dave: null};, which code snippet correctly creates an array of keys whose values are truthy?

hard

A. Object.values(scores).filter(value => value)

B. Object.keys(scores).filter(key => scores[key])

C. Object.entries(scores).filter(([k,v]) => k).map(([k,v]) => v)

D. Object.keys(scores).map(key => scores[key])

Solution

1. Step 1: Understand filtering keys by truthy values

   We want keys where their values are truthy (non-zero, non-null).

2. Step 2: Analyze each option

   Object.keys(scores).filter(key => scores[key]) filters keys by checking if scores[key] is truthy, returning keys correctly.
   Object.values(scores).filter(value => value) returns values, not keys.
   Object.entries(scores).filter(([k,v]) => k).map(([k,v]) => v) filters by keys (always truthy) and maps to values, wrong.
   Object.keys(scores).map(key => scores[key]) maps keys to values without filtering.

3. Final Answer:

   Object.keys(scores).filter(key => scores[key]) -> Option B

4. Quick Check:

   Filter keys by truthy values = Object.keys(scores).filter(key => scores[key]) [OK]

Hint: Filter keys by checking their values truthiness [OK]

Common Mistakes:

• Filtering values but expecting keys
• Mapping keys to values without filtering
• Filtering keys by keys instead of values