Constructor functions in Javascript - Step-by-Step Execution

Concept Flow - Constructor functions

Call Constructor Function with new

↓

Create empty object

↓

Set this to new object

↓

Add properties/methods to this

↓

Return this object

↓

Store object in variable

↓

Use object

When you call a constructor function with 'new', JavaScript creates a new object, sets 'this' inside the function to that object, adds properties, then returns the object.

Execution Sample

Javascript

function Person(name) {
  this.name = name;
  this.greet = function() {
    return `Hi, I am ${this.name}`;
  };
}

const p = new Person('Anna');
console.log(p.greet());

Creates a Person object with a name and a greet method, then calls greet to show a message.

Execution Table

Step	Action	this value	Properties added	Result/Output
1	Call Person('Anna') with new	empty object {}	none yet	new empty object created
2	Assign this.name = 'Anna'	{}	name: 'Anna'	property 'name' added
3	Assign this.greet = function() {...}	{ name: 'Anna' }	greet: function	method 'greet' added
4	Return this object	{ name: 'Anna', greet: function }	all properties set	object returned and stored in p
5	Call p.greet()	{ name: 'Anna', greet: function }	none	returns 'Hi, I am Anna'

💡 Execution stops after greet method returns the greeting string.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
this	undefined	{}	{ name: 'Anna' }	{ name: 'Anna', greet: function }	{ name: 'Anna', greet: function }
p	undefined	undefined	undefined	undefined	{ name: 'Anna', greet: function }

Key Moments - 3 Insights

Why does 'this' inside the constructor refer to the new object?

Because when you call a function with 'new', JavaScript automatically sets 'this' to the new empty object being created, as shown in execution_table step 1.

What happens if you call the constructor function without 'new'?

Without 'new', 'this' does not point to a new object but usually to the global object or undefined, so properties won't be set on a new object. This is why step 1 is important.

Why does the greet method use 'this.name'?

Because 'this' inside greet refers to the object that called it (p), so it accesses the 'name' property of that object, as seen in execution_table step 5.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'this' after step 2?

A {} (empty object)

B undefined

C { name: 'Anna' }

D null

💡 Hint

Check the 'this value' column in execution_table row for step 2.

At which step is the greet method added to the object?

A Step 3

B Step 1

C Step 2

D Step 5

💡 Hint

Look at the 'Properties added' column in execution_table for when 'greet' appears.

If you forget to use 'new' when calling Person('Anna'), what will happen?

A A new object is created anyway

B 'this' will be undefined or global object, so properties won't be set correctly

C The greet method will still work normally

D JavaScript will throw a syntax error

💡 Hint

Refer to key_moments about what happens without 'new'.

Concept Snapshot

Constructor functions create objects using 'new'.
Inside, 'this' is the new object.
Add properties/methods to 'this'.
Return is automatic if no other object returned.
Use to make many similar objects easily.

Full Transcript

When you use a constructor function in JavaScript with the 'new' keyword, the language creates a new empty object and sets 'this' inside the function to that object. Then, properties and methods are added to 'this'. Finally, the object is returned and stored in a variable. For example, calling 'new Person("Anna")' creates an object with a 'name' property set to 'Anna' and a 'greet' method. Calling 'p.greet()' returns the greeting string. If you forget 'new', 'this' won't point to a new object, so properties won't be set correctly. This process helps you make many similar objects easily.

Practice

1. What does the new keyword do when used with a constructor function in JavaScript?

easy

A. Creates a new object and sets this to that object inside the constructor

B. Calls the constructor function without creating a new object

C. Deletes the constructor function after running

D. Returns a string representation of the constructor

Solution

1. Step 1: Understand the role of new

   The new keyword creates a fresh object and sets this inside the constructor to that object.

2. Step 2: Effect on constructor function

   It allows the constructor to initialize properties on the new object and then returns it automatically.

3. Final Answer:

   Creates a new object and sets this to that object inside the constructor -> Option A

4. Quick Check:

   new creates object = A [OK]

Hint: Remember: new makes a new object and sets this [OK]

Common Mistakes:

• Thinking new just calls the function without creating an object
• Believing new returns a string
• Confusing new with deleting functions

2. Which of the following is the correct syntax to define a constructor function named Car?

easy

A. function Car() { this.make = 'Toyota'; }

B. var Car = () => { this.make = 'Toyota'; }

C. class Car { make = 'Toyota'; }

D. function Car[] { this.make = 'Toyota'; }

Solution

1. Step 1: Identify valid constructor function syntax

   A constructor function is a normal function with a capitalized name, like function Car() {}.

2. Step 2: Check each option

   function Car() { this.make = 'Toyota'; } uses correct function syntax. var Car = () => { this.make = 'Toyota'; } uses arrow function which does not bind this properly. class Car { make = 'Toyota'; } is a class, not a constructor function. function Car[] { this.make = 'Toyota'; } has invalid syntax with square brackets.

3. Final Answer:

   function Car() { this.make = 'Toyota'; } -> Option A

4. Quick Check:

   Constructor function = normal function with capital name [OK]

Hint: Use normal function with capital name for constructor [OK]

Common Mistakes:

• Using arrow functions as constructors
• Trying to use class syntax instead of function
• Writing invalid function syntax with brackets

3. What will be the output of this code?

function Person(name) {
  this.name = name;
}
const p = new Person('Alice');
console.log(p.name);

medium

A. undefined

B. Error

C. Alice

D. Person

Solution

1. Step 1: Understand object creation with constructor

   The new Person('Alice') creates a new object and sets this.name to 'Alice'.

2. Step 2: Access the property

   Logging p.name prints the value assigned, which is 'Alice'.

3. Final Answer:

   Alice -> Option C

4. Quick Check:

   Property set by constructor = 'Alice' [OK]

Hint: Remember: this.name sets property on new object [OK]

Common Mistakes:

• Expecting undefined because of missing return
• Confusing constructor name with property value
• Thinking console.log prints function name

4. Find the error in this constructor function:

function Animal(type) {
  type = type;
  this.type = type;
}
const a = new Animal('Dog');
console.log(a.type);

medium

A. Missing new keyword when creating object

B. Cannot assign this.type inside constructor

C. Constructor function name should be lowercase

D. The assignment type = type; does nothing and is redundant

Solution

1. Step 1: Analyze the assignment type = type;

   This line assigns the parameter type to itself, which does nothing and is unnecessary.

2. Step 2: Check other parts

   The line this.type = type; correctly assigns the parameter to the object property. The new keyword is used correctly. Function name capitalization is fine.

3. Final Answer:

   The assignment type = type; does nothing and is redundant -> Option D

4. Quick Check:

   Redundant self-assignment = B [OK]

Hint: Check if variables are assigned to themselves unnecessarily [OK]

Common Mistakes:

• Thinking type = type; sets object property
• Forgetting to use new keyword
• Believing constructor names must be lowercase

5. You want to create a constructor function Book that takes title and author as parameters and adds a method describe that returns a string like "Title by Author". Which code correctly does this?

hard

A. function Book(title, author) {
this.title = title;
this.author = author;
}
Book.describe = function() {
return `${this.title} by ${this.author}`;
};

B. function Book(title, author) {
this.title = title;
this.author = author;
this.describe = function() {
return `${this.title} by ${this.author}`;
};
}

C. function Book(title, author) {
this.title = title;
this.author = author;
describe() {
return `${this.title} by ${this.author}`;
}
}

D. function Book(title, author) {
this.title = title;
this.author = author;
this.describe = `${this.title} by ${this.author}`;
}

Solution

1. Step 1: Check method definition inside constructor

   function Book(title, author) { this.title = title; this.author = author; this.describe = function() { return `${this.title} by ${this.author}`; }; } correctly defines describe as a function property on this, so each object has its own method.

2. Step 2: Analyze other options

   function Book(title, author) { this.title = title; this.author = author; } Book.describe = function() { return `${this.title} by ${this.author}`; }; adds describe to the constructor function itself, not instances. function Book(title, author) { this.title = title; this.author = author; describe() { return `${this.title} by ${this.author}`; } } has invalid syntax for method inside function. function Book(title, author) { this.title = title; this.author = author; this.describe = `${this.title} by ${this.author}`; } assigns a string, not a function, so describe is not callable.

3. Final Answer:

   function Book(title, author) { this.title = title; this.author = author; this.describe = function() { return `${this.title} by ${this.author}`; }; } -> Option B

4. Quick Check:

   Method as function property on this = A [OK]

Hint: Define methods as functions on this inside constructor [OK]

Common Mistakes:

• Adding methods to constructor function instead of instances
• Using invalid syntax for methods inside functions
• Assigning method as string instead of function