Class syntax in Javascript - Step-by-Step Execution

Concept Flow - Class syntax

Define class with constructor and methods

↓

Create instance with 'new'

↓

Constructor runs, sets properties

↓

Call methods on instance

↓

Methods use instance properties

↓

Output or return results

This flow shows how a class is defined, an object is created, and methods are called using that object.

Execution Sample

Javascript

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return `Hello, ${this.name}!`;
  }
}

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

Defines a Person class with a constructor and greet method, creates an instance, and calls greet.

Execution Table

Step	Action	Evaluation	Result
1	Define class Person	Class syntax parsed	Person class ready
2	Create instance p = new Person('Alice')	Constructor called with name='Alice'	p.name set to 'Alice'
3	Call p.greet()	Method greet runs	Returns 'Hello, Alice!'
4	console.log output	Prints returned string	Hello, Alice!

💡 Program ends after printing greeting message

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
p	undefined	Person { name: 'Alice' }	Person { name: 'Alice' }	Person { name: 'Alice' }
p.name	undefined	'Alice'	'Alice'	'Alice'

Key Moments - 3 Insights

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

Inside the constructor, 'this.name = name' sets the property 'name' on the new object. This is shown in execution_table step 2 where p.name becomes 'Alice'.

What happens when we call p.greet()?

Calling p.greet() runs the greet method using the instance's 'name' property. Execution_table step 3 shows it returns 'Hello, Alice!'.

Why do we use 'new' when creating an instance?

Using 'new' runs the constructor and creates a new object. Without 'new', the constructor won't set up the object properly, as shown in execution_table step 2.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of p.name after step 2?

A 'Alice'

B undefined

C null

D 'name'

💡 Hint

Check variable_tracker row for p.name after step 2

At which step does the greet method return the greeting string?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

See execution_table step 3 where p.greet() runs and returns the string

If we remove 'new' when creating p, what happens at step 2?

A Constructor runs normally and p is created

B Error or p is undefined

C p.name is set to 'Alice' anyway

D greet method runs automatically

💡 Hint

Recall key_moments explanation about 'new' usage and execution_table step 2

Concept Snapshot

class ClassName {
  constructor(params) { this.prop = value; }
  method() { return something; }
}

const obj = new ClassName(args);
obj.method();

Use 'new' to create instance; 'this' refers to the instance inside methods.

Full Transcript

This example shows how to define a class in JavaScript using the class keyword. The constructor method sets up properties on new objects using 'this'. We create an instance with 'new', which runs the constructor. Then we call a method on the instance that uses the instance's properties. The execution table traces each step: defining the class, creating the instance, calling the method, and printing the output. The variable tracker shows how the instance's properties change. Key moments clarify why 'this' and 'new' are important. The quiz tests understanding of these steps.

Practice

1. What is the main purpose of a class in JavaScript?

easy

A. To create blueprints for objects with shared properties and methods

B. To execute code immediately

C. To store data in a database

D. To style HTML elements

Solution

1. Step 1: Understand what a class represents

   A class is a blueprint or template for creating objects that share properties and behaviors.

2. Step 2: Compare options with the definition

   Only To create blueprints for objects with shared properties and methods correctly describes the purpose of a class in JavaScript.

3. Final Answer:

   To create blueprints for objects with shared properties and methods -> Option A

4. Quick Check:

   Class purpose = blueprint for objects [OK]

Hint: Classes define object templates, not immediate actions [OK]

Common Mistakes:

• Confusing classes with functions that run immediately
• Thinking classes store data like databases
• Mixing classes with styling or HTML

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

easy

A. class Car() { constructor() { } }

B. function Car() { constructor() { } }

C. class Car { function constructor() { } }

D. class Car { constructor() { } }

Solution

1. Step 1: Recall correct class syntax

   A class is declared with the keyword class, followed by the class name and curly braces. The constructor is a method inside without the function keyword.

2. Step 2: Check each option

   Only class Car { constructor() { } } is correct. The other options have syntax errors such as parentheses after the class name, using function Car() declaration, or using the function keyword for the constructor.

3. Final Answer:

   class Car { constructor() { } } -> Option D

4. Quick Check:

   Class syntax = class Name { constructor() {} } [OK]

Hint: Class constructor has no 'function' keyword inside class [OK]

Common Mistakes:

• Adding parentheses after class name
• Using 'function' keyword inside class methods
• Defining constructor outside class body

3. What will be the output of the following code?

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return `Hello, ${this.name}!`;
  }
}
const p = new Person('Anna');
console.log(p.greet());

medium

A. Hello, Anna!

B. Hello, undefined!

C. Hello, !

D. Error: greet is not a function

Solution

1. Step 1: Understand object creation and constructor

   The Person class constructor sets this.name to the passed argument. Here, 'Anna' is passed, so this.name becomes 'Anna'.

2. Step 2: Call the greet method

   The greet method returns a string using this.name. Since this.name is 'Anna', the returned string is 'Hello, Anna!'.

3. Final Answer:

   Hello, Anna! -> Option A

4. Quick Check:

   Method uses this.name = 'Anna' [OK]

Hint: Constructor sets properties; methods use them with this [OK]

Common Mistakes:

• Forgetting to pass argument to constructor
• Expecting greet to print instead of return
• Confusing this.name with undefined

4. Identify the error in the following class code:

class Animal {
  constructor(type) {
    this.type = type;
  }
  speak() {
    console.log('I am a ' + type);
  }
}
const a = new Animal('Dog');
a.speak();

medium

A. Incorrect class declaration syntax

B. Missing constructor keyword

C. Using undefined variable 'type' inside speak method

D. Cannot create instance with new keyword

Solution

1. Step 1: Check variable usage inside speak method

   The method uses type directly, but type is not defined in its scope. It should use this.type to access the instance property.

2. Step 2: Confirm other parts are correct

   The constructor and class syntax are correct, and creating an instance with new is valid.

3. Final Answer:

   Using undefined variable 'type' inside speak method -> Option C

4. Quick Check:

   Use this.type to access property inside methods [OK]

Hint: Use this.property inside class methods to access instance data [OK]

Common Mistakes:

• Using variable name without this inside methods
• Forgetting to use new keyword when creating instance
• Misnaming constructor method

5. Given the class below, what will be the output of console.log(car.getDescription());?

class Vehicle {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }
  getDescription() {
    return `${this.make} ${this.model}`;
  }
}
class Car extends Vehicle {
  constructor(make, model, year) {
    super(make, model);
    this.year = year;
  }
  getDescription() {
    return `${this.year} ${super.getDescription()}`;
  }
}
const car = new Car('Toyota', 'Corolla', 2020);
console.log(car.getDescription());

hard

A. Toyota Corolla

B. 2020 Toyota Corolla

C. Corolla Toyota 2020

D. Error: super.getDescription is not a function

Solution

1. Step 1: Understand inheritance and super calls

   The Car class extends Vehicle. The Car constructor calls super(make, model) to initialize those properties in the parent class.

2. Step 2: Analyze getDescription method in Car

   The Car class overrides getDescription and calls super.getDescription() to get the parent class description, then prepends the year.

3. Step 3: Substitute values

   super.getDescription() returns 'Toyota Corolla'. Adding this.year (2020) before it results in '2020 Toyota Corolla'.

4. Final Answer:

   2020 Toyota Corolla -> Option B

5. Quick Check:

   super.method() calls parent method [OK]

Hint: Use super.method() to call parent class methods inside subclass [OK]

Common Mistakes:

• Forgetting to call super() in subclass constructor
• Not using super.getDescription() inside overridden method
• Mixing order of make and model in output