Object.create usage in Javascript - Step-by-Step Execution

Concept Flow - Object.create usage

Define prototype object

↓

Call Object.create(prototype)

↓

New object created

↓

New object inherits prototype properties

↓

Add or override properties on new object

↓

Use new object with inherited and own properties

Create a new object that inherits from a given prototype object, then optionally add or override properties on the new object.

Execution Sample

Javascript

const proto = { greet() { return 'Hello'; } };
const obj = Object.create(proto);
obj.name = 'Alice';
console.log(obj.greet());
console.log(obj.name);

Creates an object that inherits a greet method from proto and adds a name property.

Execution Table

Step	Action	Evaluation	Result
1	Define proto object with greet method	proto = { greet: function }	proto object created
2	Create obj with Object.create(proto)	obj inherits from proto	obj created with proto as prototype
3	Add property name to obj	obj.name = 'Alice'	obj has own property name='Alice'
4	Call obj.greet()	obj.greet() looks up proto.greet()	returns 'Hello'
5	Access obj.name	obj.name is own property	returns 'Alice'
6	End of execution		All steps completed

💡 All steps executed; obj inherits from proto and has own property name

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
proto	{ greet() }	{ greet() }	{ greet() }	{ greet() }
obj	undefined	inherits proto	inherits proto, name='Alice'	inherits proto, name='Alice'

Key Moments - 3 Insights

Why does obj.greet() work even though greet is not defined directly on obj?

Because obj was created with proto as its prototype (see Step 2 and Step 4 in execution_table), so obj inherits greet from proto.

What is the difference between obj.name and obj.greet() in terms of where they come from?

obj.name is an own property added directly to obj (Step 3), while obj.greet() is inherited from proto (Step 4).

If we change proto.greet, will obj.greet() reflect the change?

Yes, because obj inherits greet from proto dynamically (see Step 4), so changes to proto.greet affect obj.greet.

Visual Quiz - 3 Questions

Look at the execution table, what does obj.greet() return at Step 4?

A Error

B undefined

C 'Hello'

D 'Alice'

💡 Hint

Check Step 4 in execution_table where obj.greet() calls proto.greet() and returns 'Hello'

At which step does obj get its own property 'name'?

A Step 3

B Step 4

C Step 2

D Step 1

💡 Hint

See Step 3 in execution_table where obj.name is assigned 'Alice'

If proto.greet is changed after obj creation, what happens when calling obj.greet()?

A obj.greet() still returns old value

B obj.greet() returns new value from proto

C obj.greet() becomes undefined

D obj.greet() throws an error

💡 Hint

Refer to key_moments about inheritance and dynamic lookup of proto properties

Concept Snapshot

Object.create(proto) makes a new object inheriting from proto.
New object can have own properties added.
Inherited properties are accessed via prototype chain.
Changes to proto affect all inheriting objects.
Useful for simple inheritance without classes.

Full Transcript

This visual execution shows how Object.create works in JavaScript. First, a prototype object proto is defined with a greet method. Then, obj is created using Object.create(proto), so obj inherits from proto. Next, obj gets its own property name set to 'Alice'. When obj.greet() is called, JavaScript looks up the greet method on proto and returns 'Hello'. Accessing obj.name returns 'Alice' directly from obj. This demonstrates how Object.create sets up inheritance, allowing obj to use proto's methods while having its own properties.

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