Object keys and values in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to get all keys from the object.

Javascript

const obj = {a: 1, b: 2, c: 3};
const keys = Object.[1](obj);
console.log(keys);

Drag options to blanks, or click blank then click option'

Akeys

BgetKeys

Centries

Dvalues

Attempts:

3 left

💡 Hint

Common Mistakes

Using Object.values instead of Object.keys

Trying to call a non-existent method like Object.getKeys

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

2fill in blank

medium

Complete the code to get all values from the object.

Javascript

const obj = {x: 10, y: 20, z: 30};
const vals = Object.[1](obj);
console.log(vals);

Drag options to blanks, or click blank then click option'

Avalues

Bkeys

Centries

DgetValues

Attempts:

3 left

💡 Hint

Common Mistakes

Using Object.keys instead of Object.values

Trying to call a non-existent method like Object.getValues

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

3fill in blank

hard

Fix the error in the code to get entries from the object.

Javascript

const obj = {name: 'Alice', age: 25};
const entries = Object.[1](obj);
console.log(entries);

Drag options to blanks, or click blank then click option'

Akeys

Bvalues

Centries

DgetEntries

Attempts:

3 left

💡 Hint

Common Mistakes

Using Object.getEntries which does not exist

Using Object.keys or Object.values instead of Object.entries

Object.entries(obj) returns an array of [key, value] pairs from the object.

4fill in blank

hard

Fill both blanks to create an object from entries and get its keys.

Javascript

const entries = [['a', 1], ['b', 2]];
const obj = Object.[1](entries);
const keys = Object.[2](obj);
console.log(keys);

Drag options to blanks, or click blank then click option'

AfromEntries

Bvalues

Ckeys

Dentries

Attempts:

3 left

💡 Hint

Common Mistakes

Using Object.entries instead of Object.fromEntries

Using Object.values instead of Object.keys to get keys

Object.fromEntries creates an object from key-value pairs. Object.keys gets the keys of that object.

5fill in blank

hard

Fill all three blanks to filter object keys with values greater than 10.

Javascript

const data = {a: 5, b: 15, c: 25};
const filteredKeys = Object.[1](data)
  .filter(key => data[key] [2] 10)
  .map(key => key.[3]());
console.log(filteredKeys);

Drag options to blanks, or click blank then click option'

Akeys

B>

CtoUpperCase

Dvalues

Attempts:

3 left

💡 Hint

Common Mistakes

Using Object.values instead of Object.keys to get keys

Using '<' instead of '>' in filter condition

Using toLowerCase instead of toUpperCase

Object.keys gets keys, filter selects keys with values > 10, map converts keys to uppercase.

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