Object.create usage in Javascript - Mini Project: Build & Apply

Using Object.create to Build a Simple Prototype Chain

📖 Scenario: Imagine you are creating a simple system to manage different types of vehicles. You want to share common properties and methods between vehicles without repeating code.

🎯 Goal: You will create a base object for vehicles, then use Object.create to make a new object for a specific vehicle type that inherits from the base. Finally, you will display the inherited and own properties.

📋 What You'll Learn

Create a base object called vehicle with a property and a method

Create a new object called car using Object.create(vehicle)

Add a new property to car

Call the inherited method from car

Print the properties to show inheritance

💡 Why This Matters

🌍 Real World

Using <code>Object.create</code> helps create objects that share common behavior without repeating code, which is useful in many programming tasks like building user interfaces or game characters.

💼 Career

Understanding prototype inheritance and <code>Object.create</code> is important for JavaScript developers to write efficient and maintainable code, especially in frameworks and libraries.

1

Create the base object vehicle

Create an object called vehicle with a property type set to "Vehicle" and a method describe that returns the string `This is a ${this.type}`.

Javascript

// Create the base object vehicle with property type and method describe
// Your code here

Hint

Use an object literal with a property type and a method describe that uses this.type.

2

Create car object inheriting from vehicle

Create a new object called car using Object.create(vehicle). Then add a property type to car with the value "Car".

Javascript

const vehicle = {
  type: "Vehicle",
  describe() {
    return `This is a ${this.type}`;
  }
};

// Create car object inheriting from vehicle and set car.type to "Car"
// Your code here

Hint

Use Object.create(vehicle) to make car inherit from vehicle. Then assign car.type = "Car".

3

Use the inherited method describe from car

Call the describe method on car and store the result in a variable called description.

Javascript

const vehicle = {
  type: "Vehicle",
  describe() {
    return `This is a ${this.type}`;
  }
};

const car = Object.create(vehicle);
car.type = "Car";

// Call car.describe() and save the result in description
// Your code here

Hint

Call car.describe() and assign it to description.

4

Print the description and check inheritance

Print the value of description using console.log. Then print car.type and vehicle.type to show the difference.

Javascript

const vehicle = {
  type: "Vehicle",
  describe() {
    return `This is a ${this.type}`;
  }
};

const car = Object.create(vehicle);
car.type = "Car";

const description = car.describe();

// Print description, car.type, and vehicle.type
// Your code here

Hint

Use console.log(description), console.log(car.type), and console.log(vehicle.type) to print the values.

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