Object.create usage in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a new object with the specified prototype.

Javascript

const proto = { greet() { return 'Hello'; } };
const obj = Object.[1](proto);
console.log(obj.greet());

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

Aassign

BdefineProperty

Ccreate

DsetPrototypeOf

Attempts:

3 left

💡 Hint

Common Mistakes

Using Object.assign instead of Object.create.

Trying to use Object.setPrototypeOf to create an object.

Using Object.defineProperty which is for properties, not creating objects.

The Object.create method creates a new object with the given prototype object.

2fill in blank

medium

Complete the code to add a property to the new object created with Object.create.

Javascript

const proto = { type: 'animal' };
const obj = Object.create(proto);
obj.[1] = 'dog';
console.log(obj.type, obj.name);

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

Atype

Bname

Cspecies

Dbreed

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to overwrite the prototype property 'type'.

Adding a property that already exists on the prototype.

Confusing prototype properties with own properties.

The property name is added directly to the new object, while type comes from the prototype.

3fill in blank

hard

Fix the error in the code to properly create an object with a prototype and a property descriptor.

Javascript

const proto = { speak() { return 'Hi'; } };
const obj = Object.create(proto, {
  age: { [1]: 5, writable: true }
});
console.log(obj.age, obj.speak());

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

Avalue

Bconfigurable

Cenumerable

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'get' instead of 'value' in the descriptor.

Omitting the 'value' key causing undefined property.

Confusing writable with value.

The property descriptor must use value to set the property's value.

4fill in blank

hard

Fill both blanks to create an object with a prototype and add a method that returns a greeting.

Javascript

const proto = {
  [1]() {
    return 'Hello, ' + this.name;
  }
};
const obj = Object.create(proto);
obj.name = 'Alice';
console.log(obj.[2]());

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

Agreet

BsayHello

Chello

Dgreeting

Attempts:

3 left

💡 Hint

Common Mistakes

Using different method names in definition and call.

Choosing method names that are not consistent.

Forgetting to define the method on the prototype.

The method name must be the same when defined and called. Here, 'greet' is used consistently.

5fill in blank

hard

Fill all three blanks to create an object with a prototype, add a property with descriptor, and call a method.

Javascript

const proto = {
  [1]() {
    return `Age is ${this.age}`;
  }
};
const obj = Object.create(proto, {
  age: { [2]: 30, writable: true, enumerable: true }
});
console.log(obj.[3]());

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

AgetAge

Bvalue

Dage

Attempts:

3 left

💡 Hint

Common Mistakes

Using different method names in definition and call.

Using incorrect keys in property descriptor.

Forgetting to make the property enumerable.

The method is named 'getAge' and is called as such. The property descriptor uses 'value' to set the age.

Practice

1. What does Object.create(proto) do in JavaScript?

easy

A. Deletes the proto object and returns a new one.

B. Creates a new object with proto as its prototype.

C. Copies all properties from proto into a new object.

D. Creates a new array from the proto object.

Solution

1. Step 1: Understand Object.create purpose

   Object.create(proto) creates a new object that uses proto as its prototype, meaning it inherits properties and methods from proto.

2. Step 2: Differentiate from copying

   It does not copy properties but links the new object to proto via the prototype chain.

3. Final Answer:

   Creates a new object with proto as its prototype. -> Option B

4. Quick Check:

   Object.create(proto) sets prototype = proto [OK]

Hint: Remember: Object.create sets prototype, does not copy properties [OK]

Common Mistakes:

• Thinking it copies properties instead of setting prototype
• Confusing with Object.assign or spread operator
• Assuming it creates arrays or deletes objects

2. Which of the following is the correct syntax to create an object child with prototype parent using Object.create?

easy

A. const child = Object.create = parent;

B. const child = new Object.create(parent);

C. const child = Object.create(parent);

D. const child = Object.create(parent)();

Solution

1. Step 1: Recall Object.create syntax

   The correct syntax is Object.create(proto) which returns a new object with proto as prototype.

2. Step 2: Check each option

   const child = Object.create(parent); uses correct syntax. const child = Object.create = parent; wrongly assigns. const child = new Object.create(parent); wrongly uses new. const child = Object.create(parent)(); tries to call the result as a function.

3. Final Answer:

   const child = Object.create(parent); -> Option C

4. Quick Check:

   Correct syntax = Object.create(proto) [OK]

Hint: Use Object.create(proto) without new or extra parentheses [OK]

Common Mistakes:

• Using new with Object.create
• Assigning Object.create to a variable incorrectly
• Calling the result as a function

3. What will be the output of this code?

const parent = { greet() { return 'Hello'; } };
const child = Object.create(parent);
console.log(child.greet());

medium

A. 'Hello'

B. undefined

C. TypeError

D. '' (empty string)

Solution

1. Step 1: Understand prototype inheritance

   child is created with parent as prototype, so it inherits greet method.

2. Step 2: Calling child.greet()

   Since greet exists on parent, child.greet() calls that method and returns 'Hello'.

3. Final Answer:

   'Hello' -> Option A

4. Quick Check:

   Inherited method call returns 'Hello' [OK]

Hint: Object.create links prototype, so inherited methods work [OK]

Common Mistakes:

• Expecting undefined because child has no own greet
• Thinking it causes error without own method
• Confusing prototype chain lookup

4. Find the error in this code snippet:

const proto = { x: 10 };
const obj = Object.create();
console.log(obj.x);

medium

A. Object.create() requires a prototype argument.

B. Cannot access property x on obj.

C. Syntax error in Object.create call.

D. obj.x is undefined because x is not own property.

Solution

1. Step 1: Check Object.create usage

   Object.create() without arguments is invalid because it requires a prototype object or null.

2. Step 2: Understand consequence

   Since no prototype is given, this causes a TypeError or unexpected behavior.

3. Final Answer:

   Object.create() requires a prototype argument. -> Option A

4. Quick Check:

   Object.create(proto) needs proto argument [OK]

Hint: Always pass prototype or null to Object.create [OK]

Common Mistakes:

• Calling Object.create without arguments
• Expecting default prototype if none given
• Ignoring TypeError from missing argument

5. How can you create an object child with prototype parent and add a new property age with value 25 during creation using Object.create?

hard

A. const child = Object.create(parent, { age: 25, writable: true });

B. const child = Object.create(parent); child.age = 25;

C. const child = Object.create(parent, { age: 25 });

D. const child = Object.create(parent, { age: { value: 25, writable: true, enumerable: true, configurable: true } });

Solution

1. Step 1: Understand Object.create second argument

   The second argument to Object.create is a property descriptor object where each property is defined with descriptors like value, writable, enumerable, and configurable.

2. Step 2: Check each option

   const child = Object.create(parent, { age: { value: 25, writable: true, enumerable: true, configurable: true } }); correctly uses property descriptor for age. const child = Object.create(parent); child.age = 25; adds property after creation, not during. Options A and C use incorrect descriptor syntax.

3. Final Answer:

   const child = Object.create(parent, { age: { value: 25, writable: true, enumerable: true, configurable: true } }); -> Option D

4. Quick Check:

   Use property descriptors in second argument [OK]

Hint: Use property descriptors object as second argument to add properties [OK]

Common Mistakes:

• Adding properties directly in second argument without descriptors
• Adding properties after creation instead of during
• Using wrong syntax for property descriptors