Why classes are introduced in Javascript - See It in Action

Understanding Why Classes Are Introduced in JavaScript

📖 Scenario: Imagine you are building a simple game where you need to create many characters. Each character has a name and a health value. You want an easy way to create and manage these characters.

🎯 Goal: You will learn why JavaScript classes were introduced by first creating characters using simple objects, then adding a helper function, and finally using a class to make the code cleaner and easier to manage.

📋 What You'll Learn

Create an object for a character with name and health

Create a function to make new characters

Create a class to define characters

Create instances of the class

Print character details

💡 Why This Matters

🌍 Real World

Classes help organize code when building games, apps, or websites where many similar things exist, like users, products, or characters.

💼 Career

Understanding classes is important for writing clean, reusable code in JavaScript, which is a key skill for many programming jobs.

1

Create a character object

Create an object called character1 with properties name set to 'Hero' and health set to 100.

Javascript

// Create an object called character1 with name 'Hero' and health 100
// Your code here

Need a hint?

Use curly braces {} to create an object with the properties name and health.

2

Create a function to make characters

Create a function called createCharacter that takes name and health as parameters and returns an object with those properties.

Javascript

const character1 = { name: 'Hero', health: 100 };

// Create a function called createCharacter(name, health) that returns an object with name and health
// Your code here

Need a hint?

Use a function that returns an object with the given name and health.

3

Create a class for characters

Create a class called Character with a constructor that takes name and health and sets them as properties.

Javascript

const character1 = { name: 'Hero', health: 100 };

function createCharacter(name, health) {
    return { name: name, health: health };
}

// Create a class called Character with a constructor(name, health) that sets this.name and this.health
// Your code here

Need a hint?

Use the class keyword and a constructor method to set properties.

4

Create instances and print details

Create two instances of Character called hero with name 'Hero' and health 100, and villain with name 'Villain' and health 80. Then print their names and health using console.log.

Javascript

const character1 = { name: 'Hero', health: 100 };

function createCharacter(name, health) {
    return { name: name, health: health };
}

class Character {
    constructor(name, health) {
        this.name = name;
        this.health = health;
    }
}

// Create hero and villain instances and print their details
// Your code here

Need a hint?

Use new Character(...) to create instances and console.log with template strings to print.