Why classes are introduced in Javascript - Visual Breakdown

Concept Flow - Why classes are introduced

Start: Need to create objects

↓

Use plain objects and functions

↓

Problems: repetitive code, no clear structure

↓

Introduce classes

↓

Create objects with shared properties and methods

↓

Easier to organize and reuse code

↓

End: Better code structure and readability

Shows the flow from using simple objects to introducing classes for better code organization and reuse.

Execution Sample

Javascript

function Person(name) {
  this.name = name;
}
Person.prototype.greet = function() {
  return `Hi, I'm ${this.name}`;
};
const p = new Person('Alice');
console.log(p.greet());

Creates a Person object using a function and prototype to share a greet method.

Execution Table

Step	Action	Evaluation	Result
1	Define Person function	Person function created	Function ready to create objects
2	Add greet method to Person.prototype	greet method added	All Person objects share greet
3	Create new Person object p with name 'Alice'	p.name = 'Alice'	p is an object with name 'Alice'
4	Call p.greet()	Returns string	"Hi, I'm Alice"
5	Output result	Console logs greeting	Hi, I'm Alice

💡 Execution stops after logging the greeting message.

Variable Tracker

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

Key Moments - 2 Insights

Why do we add methods to Person.prototype instead of inside the Person function?

Adding methods to Person.prototype means all objects created share the same method, saving memory and keeping code organized, as shown in step 2 and 4 of the execution_table.

Why not just create separate objects with the same methods each time?

Creating separate methods for each object wastes memory and makes code repetitive. Using classes or prototypes shares methods efficiently, as seen in the transition from step 1 to step 2.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of p.name after step 3?

A undefined

B 'Alice'

C null

D Person

💡 Hint

Check the variable_tracker row for p.name after step 3.

At which step does the greet method become available to the object p?

A Step 2

B Step 3

C Step 1

D Step 4

💡 Hint

Look at execution_table step 2 where greet is added to Person.prototype.

If we did not use Person.prototype for greet, what would happen?

A Objects could not have greet method

B greet method would be shared automatically

C Each object would have its own copy of greet method

D Code would run faster

💡 Hint

Refer to key_moments about method sharing and memory usage.

Concept Snapshot

Classes help organize code by grouping data and functions.
They let us create many objects sharing methods.
Before classes, functions and prototypes were used.
Classes make code easier to read and reuse.
They reduce repeated code and save memory.

Full Transcript

We start by needing to create objects in JavaScript. Initially, we use plain objects and functions, but this causes repetitive code and no clear structure. To solve this, classes were introduced. Classes let us create objects that share properties and methods easily. This makes code more organized and reusable. In the example, we define a Person function and add a greet method to its prototype. When we create a new Person object named p, it has access to greet. Calling p.greet() returns a greeting string. This shows how classes and prototypes help share methods without repeating code. The execution table traces each step from defining the function to calling the method and printing the result. Variable tracking shows how p and its properties change. Key moments explain why methods go on the prototype and why sharing methods is better than copying them. The quiz checks understanding of variable values and method sharing. Overall, classes improve code structure, readability, and efficiency.