Object use cases in Javascript - Mini Project: Build & Apply

Object use cases

📖 Scenario: You are building a simple contact list app. Each contact has a name and a phone number. You want to store these contacts in an object for easy lookup and management.

🎯 Goal: Create an object to store contacts, add a new contact, retrieve a contact's phone number, and display the contact list.

📋 What You'll Learn

Create an object called contacts with two contacts and their phone numbers.

Create a variable called newContactName with the value 'Emma' and a variable called newContactNumber with the value '555-0199'.

Add the new contact to the contacts object using the variables newContactName and newContactNumber.

Use a for...in loop to print each contact's name and phone number in the format: Name: PhoneNumber.

💡 Why This Matters

🌍 Real World

Objects are used to store and manage related data like contacts, products, or settings in many apps.

💼 Career

Understanding objects and how to manipulate them is essential for web development and working with data in JavaScript.

1

Create the initial contacts object

Create an object called contacts with these exact entries: 'Alice': '555-1234' and 'Bob': '555-5678'.

Javascript

// Create the contacts object with Alice and Bob
// Your code here

Hint

Use curly braces {} to create an object and add key-value pairs for Alice and Bob.

2

Add new contact variables

Create a variable called newContactName with the value 'Emma' and a variable called newContactNumber with the value '555-0199'.

Javascript

const contacts = {
  'Alice': '555-1234',
  'Bob': '555-5678'
};

// Create newContactName and newContactNumber variables
// Your code here

Hint

Use const to create variables for the new contact's name and number.

3

Add the new contact to the contacts object

Add the new contact to the contacts object using the variables newContactName and newContactNumber.

Javascript

const contacts = {
  'Alice': '555-1234',
  'Bob': '555-5678'
};

const newContactName = 'Emma';
const newContactNumber = '555-0199';

// Add the new contact to contacts
// Your code here

Hint

Use bracket notation with the variable newContactName to add the new contact to the object.

4

Print all contacts

Use a for...in loop with the variable name to print each contact's name and phone number in the format: Name: PhoneNumber.

Javascript

const contacts = {
  'Alice': '555-1234',
  'Bob': '555-5678'
};

const newContactName = 'Emma';
const newContactNumber = '555-0199';

contacts[newContactName] = newContactNumber;

// Use for...in loop to print all contacts
// Your code here

Hint

Use for (const name in contacts) and console.log with template strings to print each contact.

Practice

1. Which of the following best describes a JavaScript object?

easy

A. A list of values without labels

B. A type of loop for repeating actions

C. A function that returns a number

D. A collection of key-value pairs to store related data

Solution

1. Step 1: Understand what an object stores

   Objects store data as pairs of keys (labels) and values, grouping related information.

2. Step 2: Compare options to definition

   A collection of key-value pairs to store related data matches this definition exactly, while others describe different concepts.

3. Final Answer:

   A collection of key-value pairs to store related data -> Option D

4. Quick Check:

   Object = key-value pairs [OK]

Hint: Objects always use keys to label their stored values [OK]

Common Mistakes:

• Confusing objects with arrays (which are ordered lists)
• Thinking objects are only functions
• Mixing up objects with loops or other structures

2. Which syntax correctly creates an object with a key 'name' and value 'Alice'?

easy

A. let obj = (name = 'Alice');

B. let obj = {name: 'Alice'};

C. let obj = ['name' => 'Alice'];

D. let obj = name: 'Alice';

Solution

1. Step 1: Recall object literal syntax

   Objects use curly braces with key: value pairs, like {key: value}.

2. Step 2: Check each option's syntax

   let obj = {name: 'Alice'}; uses correct curly braces and colon. Others use invalid syntax for JavaScript objects.

3. Final Answer:

   let obj = {name: 'Alice'}; -> Option B

4. Quick Check:

   Object syntax = {key: value} [OK]

Hint: Use curly braces and colon for object keys and values [OK]

Common Mistakes:

• Using parentheses instead of braces
• Using arrow => which is not valid in JS objects
• Omitting braces entirely

3. What will be the output of this code?

const car = { brand: 'Toyota', year: 2020 };
console.log(car.brand);

medium

A. Toyota

B. brand

C. undefined

D. 2020

Solution

1. Step 1: Access the 'brand' property of the object

   car.brand accesses the value stored under the key 'brand', which is 'Toyota'.

2. Step 2: Understand console.log output

   console.log prints the value Toyota to the console.

3. Final Answer:

   Toyota -> Option A

4. Quick Check:

   car.brand = Toyota [OK]

Hint: Access object values with dot notation: object.key [OK]

Common Mistakes:

• Printing the key name instead of the value
• Using wrong property name causing undefined
• Confusing object with array indexing

4. Find the error in this code snippet:

const person = { name: 'Bob', age: 25 };
console.log(person['age']);
console.log(person.age());

medium

A. person.age() is incorrect because age is not a function

B. person['age'] should be person.age()

C. Missing semicolon after object declaration

D. person.name is undefined

Solution

1. Step 1: Identify property types in the object

   person has keys 'name' and 'age' with values 'Bob' and 25 (a number), not functions.

2. Step 2: Check method call usage

   person.age() tries to call age as a function, but age is a number, causing an error.

3. Final Answer:

   person.age() is incorrect because age is not a function -> Option A

4. Quick Check:

   Only functions can be called with () [OK]

Hint: Only call functions with () not plain values [OK]

Common Mistakes:

• Calling a number or string as a function
• Confusing bracket and dot notation usage
• Assuming missing semicolons cause runtime errors

5. You want to store a list of students with their scores and add a method to calculate the average score. Which object structure is best?

hard

A. const students = { 'Anna': 90, 'Ben': 80 };

B. const students = ['Anna', 90, 'Ben', 80];

C. const students = { list: [{name: 'Anna', score: 90}, {name: 'Ben', score: 80}], average: function() { /* calculate average */ } };

D. const students = function() { return ['Anna', 90, 'Ben', 80]; };

Solution

1. Step 1: Identify need for data and method together

   We want to store multiple students with scores and a method to calculate average, so an object with a list and a function is suitable.

2. Step 2: Evaluate each option

   const students = { list: [{name: 'Anna', score: 90}, {name: 'Ben', score: 80}], average: function() { /* calculate average */ } }; uses an object with a list of student objects and a method for average calculation. const students = ['Anna', 90, 'Ben', 80]; is a flat array without structure. const students = { 'Anna': 90, 'Ben': 80 }; lacks a method. const students = function() { return ['Anna', 90, 'Ben', 80]; }; is a function, not an object with data and method.

3. Final Answer:

   const students = { list: [{name: 'Anna', score: 90}, {name: 'Ben', score: 80}], average: function() { /* calculate average */ } }; -> Option C

4. Quick Check:

   Object with data + method = const students = { list: [{name: 'Anna', score: 90}, {name: 'Ben', score: 80}], average: function() { /* calculate average */ } }; [OK]

Hint: Use objects with arrays and methods for grouped data and actions [OK]

Common Mistakes:

• Using arrays without methods for complex data
• Not grouping related data in objects
• Confusing functions with data containers