Master the Magic of JavaScript Classes in Minutes! 🎓🚀 - The Beginners Guide To Javascript(Part 10)
Tags: javascript, beginners, programming, tutorial
Published: 2023-05-10 20:13:37

## 🚀 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.

```javascript
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. 🧙‍♀️🔮

```javascript
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.

```javascript
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.

```javascript
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! 🐲💥

```javascript
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. 🐉🔥💰

```javascript
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! 🐉🎩🐇

```javascript
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! 📜✨

```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! 🧙‍♂️🔮

```javascript
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! 🐉❄️

```javascript
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

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