Object use cases in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create an object with a property 'name' set to 'Alice'.

Javascript

const person = { name: [1] };

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

A'Alice'

BAlice

C"name"

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around string values.

Using the property name instead of the value.

The property value must be a string, so it needs quotes around 'Alice'.

2fill in blank

medium

Complete the code to access the 'age' property from the object 'user'.

Javascript

const age = user[1]age;

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

A['']

B::

C->

D.

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect symbols like '->' or '::'.

Using brackets without quotes.

Use dot notation to access properties in JavaScript objects.

3fill in blank

hard

Fix the error in the code to add a new property 'city' with value 'Paris' to the object 'location'.

Javascript

location[1]city = 'Paris';

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

A[]

B->

C.

D::

Attempts:

3 left

💡 Hint

Common Mistakes

Using arrow or double colon symbols.

Trying to use brackets without quotes.

Use dot notation to add or update properties in an object.

4fill in blank

hard

Fill both blanks to create an object 'scores' with keys as player names and values as their points, but only include players with points greater than 10.

Javascript

const scores = {};
for (const player of players) {
  if (player.points > 10) {
    scores[[1]] = [2];
  }
};

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

Aplayer.name

Bplayer.points

Cplayer.score

Dplayer.value

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong property names like score or value.

Mixing keys and values.

Use player.name as key and player.points as value to build the object with correct data.

5fill in blank

hard

Fill all three blanks to create a function that returns an object with keys as uppercase names and values as ages, but only for people older than 18.

Javascript

function adultAges(people) {
  return people.reduce((acc, [1]) => {
    if ([2].age > 18) {
      acc[[3]] = [2].age;
    }
    return acc;
  }, {});
}

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

Aperson

Bp

Cp.name.toUpperCase()

Dperson.name.toUpperCase()

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names inconsistently.

Not converting names to uppercase.

Mixing parameter names in different places.

Use 'p' as the parameter, check p.age, and use p.name.toUpperCase() as key to build the object.

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