Master the Magic of JavaScript Classes in Minutes! 🎓🚀 - The Beginners Guide To Javascript(Part 10)

🚀 Journey into JavaScript Classes 🎓

Greetings, brave JavaScript adventurers! 🧙‍♂️ Prepare to embark on a fun-filled quest through the mythical realm of JavaScript classes. If you're ready to level up your coding skills, then grab your keyboard and let's dive in! 💻

What Are Classes?

Classes are the blueprints for creating objects in JavaScript. If our program was a kingdom, classes would be the molds we use to forge our brave knights, magnificent castles, and maybe even a few fire-breathing dragons. 🏰🐉🦸

Let's create a class to help build our castle.

class Castle {
    constructor(name, location) {
        this.name = name;
        this.location = location;
    }
}

Why Use Classes?

Imagine trying to build a forest one tree at a time! Exhausting, right? 🌲😰🌳 Classes allow us to create as many objects as we want with the same structure, saving us time and energy. Not to mention, keeping our code DRY (Don't Repeat Yourself)!

Defining Classes in JS

To define a class in JavaScript, we use the class keyword. Then we add a magical incantation called the constructor method, which sets up our object. 🧙‍♀️🔮

class Dragon {
    constructor(name, color) {
        this.name = name;
        this.color = color;
    }
}

Encapsulation in OOP

Encapsulation is one of the core principles of Object-Oriented Programming (OOP). It's like a magical chest 🧰 that bundles up data (properties) and behavior (methods) into a single unit (class).

Let's create a chest class to store our gold and let's create a method to add more gold to our chest.

class Chest {
    constructor(goldCoins) {
        this.goldCoins = goldCoins;
    }

    addGold(amount) {
        this.goldCoins += amount;
    }
}

Encapsulation helps to prevent direct access to the data. The gold coins 🪙 are safe inside the chest!

Instantiating a Class (Creating an Object)

Once we have our class (blueprint), we can start creating objects (instances). This is known as instantiating a class. It's like casting a spell to summon a dragon! 🐉✨

Let's instantiate a new dragon with our Dragon Class from above.

let smaug = new Dragon("Smaug", "Red");

The constructor Method

The constructor method is like the heart of our class. It's invoked each time a new object is created, initializing the object's properties. It's the spark that brings our dragon to life! 🐲💥

class Dragon {
    constructor(name, color) {
        this.name = name;
        this.color = color;
    }
}

Defining Methods in a Class

Methods are like the abilities of our dragon. They can make it fly, breathe fire, or hoard gold. These methods can be used by any instance of the class. 🐉🔥💰

class Dragon {
    constructor(name, color) {
        this.name = name;
        this.color = color;
    }

    fly() {
        console.log(`${this.name} is flying!`);
    }
}

Overriding Methods

Sometimes, a dragon might have a unique ability. We can override a method to give it a special twist. It's like our dragon learned a new trick! 🐉🎩🐇

class Dragon {
    // ...
    fly() {
        console.log(`${this.name} is soaring through the sky!`);
    }
}

class IceDragon extends Dragon {
    fly() {
        console.log(`${this.name} is flying with a trail of frost and ice!`);
    }
}

let viserion = new IceDragon("Viserion", "White");
viserion.fly(); // Outputs: "Viserion is flying with a trail of frost and ice!"

Constructor Functions - Before Classes

Before classes were introduced, constructor functions were used to create objects. They were like the ancient runes of JavaScript! 📜✨

function Unicorn(name, color) {
    this.name = name;
    this.color = color;
}

Static Methods

Static methods are unique spells that belong to the class itself, not to any instance of the class. It's like a secret spell only the grand wizard can cast! 🧙‍♂️🔮

class Dragon {
    // ...
    static breatheFire() {
        console.log("The sky is ablaze with dragon fire!");
    }
}

Dragon.breatheFire(); // Outputs: "The sky is ablaze with dragon fire!"

See how this method exists on the class itself and we call it from the class declaration and not an instance of the class.

Inheritance

Inheritance allows classes to share properties and methods, just like a child inherits traits from their parents. A dragon might inherit its wings from its dragon parent, but its icy breath from its frost giant parent! 🐉❄️

class Dragon {
    fly() {
        console.log(`${this.name} is flying!`);
    }
}

class IceDragon extends Dragon {
    fly() {
        super.fly();
        console.log(`${this.name} is leaving a trail of frost in the sky!`);
    }
}

let viserion = new IceDragon("Viserion", "White");
viserion.fly(); // Outputs: "Viserion is flying!" and then "Viserion is leaving a trail of frost in the sky!"

Bonus Material

In JavaScript, even functions are objects! Mind-blowing, right? 🤯 This means you can add properties and methods to a function just like any other object

function MagicSpell() {
    console.log("Abracadabra!");
}

MagicSpell.magicWords = "Hocus Pocus";
console.log(MagicSpell.magicWords); // Outputs: "Hocus Pocus"

Conclusion

Congrats, JavaScript adventurers! 🎉 You've journeyed through the realm of classes and emerged victorious. You've mastered the arcane arts of creating classes, instantiating objects, defining methods, and so much more. 🧙‍♂️✨

Remember, with great power comes great responsibility. Use your newfound knowledge wisely, and may your coding journey be filled with joy and discovery! 🌟

Until our next adventure, happy coding! 💻🎉🚀