Object creation in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of Object.create with prototype properties

What is the output of the following code?

Javascript

const proto = { greeting: 'hello' };
const obj = Object.create(proto);
obj.greeting = 'hi';
console.log(obj.greeting);
console.log(proto.greeting);

A "hi" and then "hello"

B "hello" and then "hi"

C undefined and then "hello"

D "hi" and then "hi"

💡 Hint

Remember that Object.create sets the prototype, and own properties override prototype properties.

The object obj has its own property greeting set to 'hi', which overrides the prototype's greeting 'hello'. So obj.greeting logs 'hi'. The prototype object proto remains unchanged, so proto.greeting logs 'hello'.

❓ Predict Output

intermediate

Output of Object.create with null prototype

What will be the output of this code?

Javascript

const obj = Object.create(null);
console.log(typeof obj.toString);

A TypeError

B "function"

C "object"

D "undefined"

💡 Hint

Object.create(null) creates an object with no prototype, so it has no inherited methods.

Since obj has no prototype, it does not inherit toString method. So obj.toString is undefined and typeof undefined is 'undefined'.

🔧 Debug

advanced

Why does this object creation code throw an error?

The following code throws an error. Which option explains the cause?

Javascript

const obj = Object.create();

A Object.create only accepts arrays as arguments.

B Object.create cannot be called without the new keyword.

C Object.create requires a prototype object argument; calling it without arguments causes a TypeError.

D Object.create requires a second argument for property descriptors.

💡 Hint

Check the required parameters for Object.create.

Object.create must be called with a prototype object as the first argument. Omitting it causes a TypeError because undefined is not an object.

❓ Predict Output

advanced

Output of Object.create with property descriptors

What is the output of this code?

Javascript

const obj = Object.create({}, {
  name: {
    value: 'Alice',
    writable: false,
    enumerable: true
  }
});
obj.name = 'Bob';
console.log(obj.name);

A "Alice"

B "Bob"

C undefined

D TypeError

💡 Hint

Check if the property is writable or not.

The property 'name' is created as non-writable, so attempts to change it are ignored. The value remains 'Alice'.

🧠 Conceptual

expert

Which option correctly creates an object with a prototype and own properties?

You want to create an object that inherits from a prototype object and also has its own property 'age' set to 30. Which code does this correctly?

A

const proto = { greet() { return 'hi'; } };
const obj = Object.create(proto, { age: 30 });

B

const proto = { greet() { return 'hi'; } };
const obj = Object.create(proto, { age: { value: 30, writable: true, enumerable: true } });

C

const proto = { greet() { return 'hi'; } };
const obj = Object.create(proto);
obj.age = 30;

D

const proto = { greet() { return 'hi'; } };
const obj = { ...proto, age: 30 };

💡 Hint

Remember Object.create's second argument requires property descriptors.

Option B correctly uses Object.create with a prototype and defines 'age' as an own property with proper descriptors. Option B adds 'age' after creation but does not use property descriptors. Option B incorrectly passes a number instead of a descriptor object. Option B creates a new object copying properties but does not set the prototype.

Practice

1. Which of the following is the correct way to create an object with a key name and value "Alice"?

easy

A. const obj = { name: "Alice" };

B. const obj = (name = "Alice");

C. const obj = [name: "Alice"];

D. const obj = name => "Alice";

Solution

1. Step 1: Understand object literal syntax

   Objects in JavaScript are created using curly braces with key-value pairs inside, like { key: value }.

2. Step 2: Identify the correct syntax for key-value pair

   The key name and value "Alice" should be inside curly braces separated by a colon.

3. Final Answer:

   const obj = { name: "Alice" }; -> Option A

4. Quick Check:

   Object literal = curly braces with key: value [OK]

Hint: Objects use curly braces with key: value pairs [OK]

Common Mistakes:

• Using parentheses instead of curly braces
• Using array brackets for objects
• Confusing arrow functions with object creation

2. Which of the following is the correct syntax to create an empty object in JavaScript?

easy

A. const obj = {};

B. const obj = ();

C. const obj = [];

D. const obj = new Object[];

Solution

1. Step 1: Recall empty object syntax

   An empty object is created using empty curly braces {}.

2. Step 2: Check each option

   const obj = {}; uses {}, which is the correct syntax. Others use parentheses, array brackets, or invalid syntax.

3. Final Answer:

   const obj = {}; -> Option A

4. Quick Check:

   Empty object = {} [OK]

Hint: Empty objects use just curly braces {} [OK]

Common Mistakes:

• Using parentheses instead of curly braces
• Using array brackets for objects
• Trying to use new Object[] which is invalid

3. What will be the output of the following code?

const person = { name: "Bob", age: 30 };
console.log(person.name);

medium

A. Error

B. 30

C. "Bob"

D. undefined

Solution

1. Step 1: Understand object property access

   Using dot notation person.name accesses the value of the key name in the object.

2. Step 2: Identify the value of name

   The value of name is the string "Bob".

3. Final Answer:

   "Bob" -> Option C

4. Quick Check:

   person.name = "Bob" [OK]

Hint: Dot notation gets value by key name [OK]

Common Mistakes:

• Confusing key name with value
• Using brackets without quotes incorrectly
• Expecting age instead of name

4. Find the error in the following code that tries to create an object:

const car = { brand = "Toyota", year: 2020 };

medium

A. Missing semicolon after object

B. Using = instead of : for the key brand

C. Using const instead of let

D. year value should be a string

Solution

1. Step 1: Check object key-value syntax

   In objects, keys and values are separated by a colon :, not an equals sign =.

2. Step 2: Identify the incorrect part

   The code uses brand = "Toyota" which is invalid syntax for object properties.

3. Final Answer:

   Using = instead of : for the key brand -> Option B

4. Quick Check:

   Object key-value separator = colon : [OK]

Hint: Use colon : between key and value in objects [OK]

Common Mistakes:

• Using = instead of : in object literals
• Thinking semicolon is mandatory inside object
• Confusing variable declaration keywords

5. You want to create an object student with keys name, age, and grades (an array). Which code correctly creates this object?

hard

A. const student = [ name: "Eva", age: 22, grades: [90, 85, 88] ];

B. const student = { "name" = "Eva", "age" = 22, "grades" = [90, 85, 88] };

C. const student = { name: "Eva", age: "22", grades: "90, 85, 88" };

D. const student = { name: "Eva", age: 22, grades: [90, 85, 88] };

Solution

1. Step 1: Verify object literal syntax with multiple keys

   Objects use curly braces with keys and values separated by colons, and multiple pairs separated by commas.

2. Step 2: Check each option for correct syntax and data types

   const student = { name: "Eva", age: 22, grades: [90, 85, 88] }; correctly uses colons and commas, and grades is an array. const student = { "name" = "Eva", "age" = 22, "grades" = [90, 85, 88] }; uses equals signs which is wrong. const student = [ name: "Eva", age: 22, grades: [90, 85, 88] ]; uses array brackets instead of curly braces. const student = { name: "Eva", age: "22", grades: "90, 85, 88" }; uses a string for grades instead of an array.

3. Final Answer:

   const student = { name: "Eva", age: 22, grades: [90, 85, 88] }; -> Option D

4. Quick Check:

   Object with array value uses colon and brackets [OK]

Hint: Use colons for keys and arrays inside objects with brackets [OK]

Common Mistakes:

• Using = instead of : for keys
• Using arrays brackets instead of curly braces for objects
• Putting arrays as strings instead of actual arrays