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.

Practice

1. Why were classes introduced in JavaScript?

easy

A. To remove the need for variables

B. To replace all functions with a new syntax

C. To make JavaScript run faster

D. To group data and related actions together in one place

Solution

1. Step 1: Understand the purpose of classes

   Classes help organize data and functions that belong together, making code easier to manage.

2. Step 2: Compare options with class purpose

   Only grouping data and actions matches the reason classes were introduced.

3. Final Answer:

   To group data and related actions together in one place -> Option D

4. Quick Check:

   Classes group data and actions = D [OK]

Hint: Classes bundle data and actions together [OK]

Common Mistakes:

• Thinking classes make code run faster
• Believing classes remove variables
• Confusing classes with replacing all functions

2. Which of the following is the correct way to define a class in JavaScript?

easy

A. var Car = () => { }

B. function Car() { }

C. class Car { constructor() { } }

D. class Car() { }

Solution

1. Step 1: Recall class syntax in JavaScript

   The correct syntax uses the keyword class followed by the class name and curly braces.

2. Step 2: Check each option

   class Car { constructor() { } } uses correct syntax with class Car { constructor() { } }. class Car() { } has wrong parentheses after class name.

3. Final Answer:

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

4. Quick Check:

   Correct class syntax = A [OK]

Hint: Class syntax uses 'class Name { constructor() {} }' [OK]

Common Mistakes:

• Adding parentheses after class name
• Using function syntax instead of class
• Confusing arrow functions with classes

3. What will be the output of this code?

class Dog {
  constructor(name) {
    this.name = name;
  }
  bark() {
    return `${this.name} says woof!`;
  }
}
const dog1 = new Dog('Buddy');
console.log(dog1.bark());

medium

A. "Buddy says woof!"

B. "dog1 says woof!"

C. undefined says woof!

D. Error: bark is not a function

Solution

1. Step 1: Understand class and method usage

   The class Dog sets the name property via constructor and bark() returns a string using that name.

2. Step 2: Trace the code execution

   dog1 is created with name 'Buddy'. Calling dog1.bark() returns 'Buddy says woof!'.

3. Final Answer:

   "Buddy says woof!" -> Option A

4. Quick Check:

   dog1.bark() = "Buddy says woof!" [OK]

Hint: Constructor sets name; bark() uses it in string [OK]

Common Mistakes:

• Expecting dog1 as name instead of 'Buddy'
• Thinking bark() is undefined
• Confusing method call syntax

4. Find the error in this class definition:

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log('Hello, ' + name);
  }
}
const p = new Person('Alice');
p.greet();

medium

A. Missing 'this' before 'name' inside greet() method

B. Constructor is missing parentheses

C. Class name should be lowercase

D. greet() method should return a string, not console.log

Solution

1. Step 1: Check variable usage inside greet()

   The method uses name without this., so it looks for a local variable which does not exist.

2. Step 2: Identify correct property access

   It should use this.name to access the instance property.

3. Final Answer:

   Missing 'this' before 'name' inside greet() method -> Option A

4. Quick Check:

   Use this.name to access property [OK]

Hint: Use 'this.' to access class properties inside methods [OK]

Common Mistakes:

• Forgetting 'this' keyword
• Thinking constructor syntax is wrong
• Believing method must return instead of console.log

5. You want to create many similar objects representing books with title and author. Why is using a class better than creating separate objects manually?

hard

A. Classes make the code run faster than objects

B. Classes let you create many objects easily with shared structure and behavior

C. Classes automatically save objects to a database

D. Classes prevent any changes to the objects after creation

Solution

1. Step 1: Understand the benefit of classes for similar objects

   Classes provide a blueprint to create many objects with the same properties and methods easily.

2. Step 2: Compare options with class benefits

   Only Classes let you create many objects easily with shared structure and behavior correctly states that classes simplify creating many similar objects with shared structure and behavior.

3. Final Answer:

   Classes let you create many objects easily with shared structure and behavior -> Option B

4. Quick Check:

   Classes simplify creating many similar objects = A [OK]

Hint: Classes are blueprints for many similar objects [OK]

Common Mistakes:

• Thinking classes speed up code execution
• Believing classes save data automatically
• Assuming classes make objects immutable