Object keys and values in Javascript - Mini Project: Build & Apply

Object keys and values

📖 Scenario: You work in a small shop and keep track of products and their prices in an object. You want to see all the product names and their prices separately.

🎯 Goal: Learn how to get all keys and values from an object using JavaScript.

📋 What You'll Learn

Create an object called products with exact keys and values

Create a variable called productNames to hold the keys of products

Create a variable called productPrices to hold the values of products

Print both productNames and productPrices to see the lists

💡 Why This Matters

🌍 Real World

Objects are used to store related data like product lists, user profiles, or settings in many web applications.

💼 Career

Knowing how to access keys and values in objects is essential for frontend and backend developers working with data structures.

1

Create the products object

Create an object called products with these exact entries: "apple": 2, "banana": 1, "orange": 3.

Javascript

// Your code here

Hint

Use curly braces {} to create an object with keys and values.

2

Get the product names

Create a variable called productNames and set it to the keys of the products object using Object.keys(products).

Javascript

const products = {"apple": 2, "banana": 1, "orange": 3};
// Your code here

Hint

Use Object.keys() to get all keys from an object.

3

Get the product prices

Create a variable called productPrices and set it to the values of the products object using Object.values(products).

Javascript

const products = {"apple": 2, "banana": 1, "orange": 3};
const productNames = Object.keys(products);
// Your code here

Hint

Use Object.values() to get all values from an object.

4

Print the product names and prices

Write two console.log statements to print productNames and productPrices.

Javascript

const products = {"apple": 2, "banana": 1, "orange": 3};
const productNames = Object.keys(products);
const productPrices = Object.values(products);
// Your code here

Hint

Use console.log(variableName) to print the variables.

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