Object.create usage in Javascript

Introduction

Object.create lets you make a new object that uses another object as its base. This helps you share properties and methods easily.

When you want to make a new object that shares behavior with an existing object.

When you want to create objects without repeating the same properties or methods.

When you want to set up a simple inheritance between objects.

When you want to create an object with a specific prototype.

When you want to avoid using classes but still share features between objects.

Syntax

Javascript

const newObject = Object.create(prototypeObject, propertiesObject);

prototypeObject is the object you want to use as the base (prototype).

propertiesObject is optional and lets you add new properties with descriptors.

Examples

Creates dog that uses animal as its base. Calling dog.speak() runs the method from animal.

Javascript

const animal = {
  speak() {
    console.log('Animal sound');
  }
};

const dog = Object.create(animal);
dog.speak();

Creates john with person as prototype and adds a name property.

Javascript

const person = {
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

const john = Object.create(person, {
  name: { value: 'John', writable: true, enumerable: true, configurable: true }
});
john.greet();

Sample Program

This program creates a car object that inherits the start method from vehicle. Then it adds a new property wheels to car.

Javascript

const vehicle = {
  start() {
    console.log('Vehicle started');
  }
};

const car = Object.create(vehicle);
car.start();

car.wheels = 4;
console.log(`Car has ${car.wheels} wheels`);

Important Notes

Objects created with Object.create have their prototype set to the object passed as the first argument.

If you pass null as the prototype, the new object will not inherit anything.

Using Object.create is a simple way to do inheritance without classes.

Summary

Object.create makes a new object using another object as a base.

It helps share properties and methods without copying them.

You can add new properties while creating the object.

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