Constructors in classes in Javascript - Step-by-Step Execution

Concept Flow - Constructors in classes

Create class with constructor

↓

Create new object with 'new'

↓

Call constructor method

↓

Initialize object properties

↓

Return new object

↓

Use object

When you create a new object from a class, the constructor runs first to set up the object's properties.

Execution Sample

Javascript

class Person {
  constructor(name) {
    this.name = name;
  }
}
const p = new Person('Anna');
console.log(p.name);

This code creates a Person object with a name property set by the constructor, then prints the name.

Execution Table

Step	Action	Evaluation	Result
1	Define class Person with constructor	class Person {...}	Class Person ready
2	Call new Person('Anna')	Calls constructor with name='Anna'	New Person object created
3	Inside constructor: this.name = name	this.name = 'Anna'	Object property name set to 'Anna'
4	Constructor returns	Implicit return of new object	Person object with name='Anna'
5	console.log(p.name)	Access p.name	Output: Anna

💡 Constructor finishes after setting properties; object is ready to use.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
p	undefined	Person object (empty)	Person object with name='Anna'	Person object with name='Anna'
this.name	undefined	undefined	'Anna'	'Anna'

Key Moments - 2 Insights

Why do we use 'this.name = name' inside the constructor?

Because 'this' refers to the new object being created, so 'this.name = name' sets the object's property. See execution_table step 3.

What happens if we forget to use 'new' when creating the object?

The constructor won't run properly and 'this' won't refer to a new object, causing errors or unexpected results. See execution_table step 2.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'this.name' after step 3?

A 'Anna'

B undefined

C null

D Error

💡 Hint

Check the 'Evaluation' and 'Result' columns in step 3 of the execution_table.

At which step does the constructor finish and the object is ready to use?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look for the step where the constructor returns the new object in the execution_table.

If we change 'new Person("Anna")' to 'new Person("Bob")', what changes in the variable_tracker?

A p.name becomes 'Anna'

B p.name becomes 'Bob'

C p.name becomes undefined

D No change

💡 Hint

Check how 'this.name' is set in the constructor and tracked in variable_tracker.

Concept Snapshot

class ClassName {
  constructor(params) {
    this.property = params;
  }
}

Use 'new ClassName(args)' to create an object.
Constructor runs first to set properties.
'this' refers to the new object.

Full Transcript

A constructor is a special method inside a class that runs automatically when you create a new object with 'new'. It sets up the object's properties using 'this'. In the example, the Person class has a constructor that takes a name and assigns it to 'this.name'. When we do 'new Person("Anna")', the constructor runs, sets the name property, and returns the new object. Then we can use the object and access its properties like 'p.name'.