Object use cases in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this code using object property shorthand?

Consider the following JavaScript code snippet. What will be logged to the console?

Javascript

const name = 'Alice';
const age = 30;
const person = { name, age };
console.log(person);

A { name: 'Alice', age: 30 }

B { name: 'name', age: 'age' }

C { name: undefined, age: undefined }

D SyntaxError

💡 Hint

Object property shorthand lets you write { name, age } instead of { name: name, age: age }.

The object person uses property shorthand, so the keys are 'name' and 'age' with values from the variables name and age.

❓ Predict Output

intermediate

What is the output when accessing nested object properties?

What will this code output to the console?

Javascript

const data = { user: { id: 1, info: { name: 'Bob', city: 'NY' } } };
console.log(data.user.info.city);

A undefined

B 'NY'

C TypeError

D 'city'

💡 Hint

Access nested properties by chaining keys with dots.

data.user.info.city accesses the city property inside info inside user, which is 'NY'.

❓ Predict Output

advanced

What is the output of this code using Object.assign?

What will be logged to the console after running this code?

Javascript

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const result = Object.assign(target, source);
console.log(result);

A { a: 1, b: 4, c: 5 }

B { a: 1, b: 2, c: 5 }

C { b: 4, c: 5 }

D TypeError

💡 Hint

Object.assign copies properties from source to target, overwriting existing keys.

The property 'b' in target is overwritten by source's 'b', and 'c' is added.

❓ Predict Output

advanced

What error does this code raise when accessing a missing property?

What happens when this code runs?

Javascript

const obj = { x: 10 };
console.log(obj.y.z);

A ReferenceError

B undefined

C null

D TypeError: Cannot read property 'z' of undefined

💡 Hint

Accessing a property of undefined causes a TypeError.

obj.y is undefined, so trying to access .z on undefined throws a TypeError.

❓ Predict Output

expert

What is the output of this code using computed property names?

What will this code print to the console?

Javascript

const key = 'score';
const player = {
  [key]: 100,
  ['level' + 1]: 2
};
console.log(player);

A SyntaxError

B { score: 100, level: 1 }

C { score: 100, level1: 2 }

D { key: 100, level1: 2 }

💡 Hint

Square brackets let you use expressions as property names.

The property names are computed: 'score' and 'level1'.

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