1. Object Prototypes: The Blueprint of JS Objects

Understanding Prototypes:

• In JavaScript, every object has a prototype.
• A prototype is also an object.
• All JavaScript objects inherit properties and methods from their prototype.

Example:

function Animal(name) {
    this.name = name;
}

Animal.prototype.speak = function() {
    console.log(`${this.name} makes a sound.`);
};

const dog = new Animal('Dog');
dog.speak(); // Dog makes a sound.

Explanation:

• Animal is a constructor function.
• Animal.prototype.speak is a method shared by all instances of Animal.
• dog inherits speak from Animal.prototype.

2. JavaScript Class Syntax: Modern and Elegant

Introduction to Classes:

• Classes are a template for creating objects.
• They encapsulate data and functionality.

Example:

class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log(`${this.name} makes a sound.`);
    }
}

const cat = new Animal('Cat');
cat.speak(); // Cat makes a sound.

Explanation:

• class Animal defines a class.
• constructor(name) is a special method for initializing new objects.
• speak is a method defined within the class.

3. Defining a Constructor: Initializing Objects

What is a Constructor?

• A constructor is a special function that creates and initializes an object instance.

Example:

class Person {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
}

const person1 = new Person('John', 'Doe');
console.log(person1.firstName); // John

Explanation:

• constructor(firstName, lastName) initializes firstName and lastName for the new Person object.
• person1 is an instance of Person with properties firstName and lastName.

4. Defining Properties and Methods: Enriching Objects

Properties and Methods:

• Properties are values associated with an object.
• Methods are functions that belong to an object.

Example:

class Car {
    constructor(brand, model) {
        this.brand = brand;
        this.model = model;
    }

    start() {
        console.log(`${this.brand} ${this.model} is starting...`);
    }
}

const car1 = new Car('Toyota', 'Corolla');
car1.start(); // Toyota Corolla is starting...

Explanation:

• brand and model are properties.
• start is a method that logs a message.

5. Defining Static Properties and Methods: Class-level Features

Static Properties and Methods:

• Static properties and methods belong to the class itself, not to instances.

Example:

class MathHelper {
    static PI = 3.14;

    static calculateCircleArea(radius) {
        return MathHelper.PI * radius * radius;
    }
}

console.log(MathHelper.PI); // 3.14
console.log(MathHelper.calculateCircleArea(5)); // 78.5

Explanation:

• static PI is a static property.
• static calculateCircleArea is a static method.
• They can be accessed using the class name without creating an instance.

Learning Outcomes:

1. Object Prototypes:
   • Understanding and using prototypes for inheritance.
2. JavaScript Class Syntax:
   • Using the modern class syntax for creating objects.
3. Defining a Constructor:
   • Creating and initializing object instances with constructors.
4. Defining Properties and Methods:
   • Adding properties and methods to objects for functionality.
5. Defining Static Properties and Methods:
   • Using static properties and methods for class-level functionality.

Resources:

• JavaScript Object Basics
• Object Prototypes
• Object-Oriented Programming
• Classes in JavaScript

Mastering these concepts will enhance your ability to create robust and maintainable JavaScript applications. Happy coding!