Object use cases in Javascript

Introduction

Objects help us group related information together in one place. They make it easy to organize and use data like real-world things.

To store details about a person like name, age, and address.

To keep settings or preferences for an app in one place.

To represent items in a game with properties like health and score.

To group related functions and data for a feature.

To collect data from a form before sending it somewhere.

Syntax

Javascript

const objectName = {
  key1: value1,
  key2: value2,
  key3: value3
};

Keys are like labels for values inside the object.

Values can be numbers, strings, arrays, functions, or even other objects.

Examples

This object stores a person's name and age.

Javascript

const person = {
  name: "Alice",
  age: 30
};

This object holds app settings like theme and notifications.

Javascript

const settings = {
  theme: "dark",
  notifications: true
};

This object represents a game item with its properties.

Javascript

const gameItem = {
  type: "sword",
  damage: 10,
  durability: 100
};

Sample Program

This program creates a car object with details and a honk function. It then prints the car info and the honk sound.

Javascript

const car = {
  brand: "Toyota",
  model: "Corolla",
  year: 2020,
  honk() {
    return "Beep beep!";
  }
};

console.log(`Car: ${car.brand} ${car.model} (${car.year})`);
console.log(car.honk());

Important Notes

You can change object values anytime by assigning new values to keys.

Objects help keep code organized and easier to understand.

Summary

Objects group related data with labels (keys) and values.

They are useful for representing real-world things and settings.

Objects can also have functions to do actions related to their data.

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