Bringing Classes to Life: Attributes and Methods in JavaScript

Hello there! Today, we're diving into JavaScript classes, focusing on attributes and methods. Attributes are characteristics, whereas methods define behaviors. You'll learn these concepts through a Dog class. By the end of the lesson, you should be able to use attributes and methods in JavaScript classes effectively.

Think of attributes as properties. For a Dog class, the attributes might include name: "Fido", breed: "Poodle", color: "White". These attributes describe the characteristics of a dog like Fido.

We add attributes to the class constructor. Below, we're setting the name, breed, and color for the Dog class:

class Dog {
    name = 'Fido';
    breed = 'Poodle';
    color = 'White';
}

When we create an instance:

const fido = new Dog();
console.log(fido.name); // Prints: Fido
console.log(fido.breed); // Prints: Poodle
console.log(fido.color); // Prints: White

We see Fido, an object of the Dog class.

Methods are actions that instances of a class can perform. For the Dog class, behaviors might include bark(), eat(), and sleep(). Methods are functions defined within the class.

Let's make Fido more interesting with some activities. We can give him actions like barking, eating, and sleeping by adding methods to the 'Dog' class.

class Dog {
    name = 'Fido';
    breed = 'Poodle';
    color = 'White';

    bark() {
        console.log(`Woof Woof!`);
    }

    eat(food) {
        // "this" corresponds to the reference to the current Dog class instance
        console.log(`${this.name} is eating ${food}.`);
    }

    sleep() {
        console.log(`Zzz...`);
    }
}

Here, bark, eat, and sleep methods define the behavior of a Dog object. A particular instance of Dog can now bark, eat, and sleep. Note the use of this in the eat(food) method - this way we reference the class attribute, where this corresponds to the reference to the current instance of the Dog class.