DEV Community

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

Posted on

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

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!`);
    }
}
Enter fullscreen mode Exit fullscreen mode

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!"
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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!"
Enter fullscreen mode Exit fullscreen mode

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!"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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! 💻🎉🚀

Top comments (1)

Collapse
 
tech_world_389a4070285eb3 profile image
TeCh WoRld • Edited

i don't know you but your way of express the example is fantastic, even if a person with no past coding experience can also learn easily. again fantastic work brother!