Class Basic Syntax

JavaScript Class Basic Syntax

JavaScript classes are a modern way to create objects and implement prototypal inheritance in an easy-to-read syntax. They were introduced in ES6 (ECMAScript 2015) and provide a more structured way to define objects compared to constructor functions.

🔹 Basic Class Syntax

A class in JavaScript is created using the class keyword.

✅ Example: Creating a Class

class User {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    sayHello() {
        console.log(`Hello, my name is ${this.name}.`);
    }
}

const user1 = new User("Alice", 25);
user1.sayHello(); // ✅ Output: Hello, my name is Alice.

✔ The constructor() method initializes properties.
✔ sayHello() is a method shared across all instances.

🔹 Class Properties

✅ Instance Properties (Defined in Constructor)

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

const myCar = new Car("Toyota", "Camry");
console.log(myCar.brand); // ✅ Output: Toyota

✅ Class Fields (Public & Private)

JavaScript now supports class fields, including public and private properties.

class Person {
    name = "Default"; // Public field
    #id = 12345; // Private field (only accessible inside the class)

    showID() {
        console.log(`ID: ${this.#id}`);
    }
}

const person = new Person();
console.log(person.name); // ✅ Output: Default
// console.log(person.#id); // ❌ Error: Private field
person.showID(); // ✅ Output: ID: 12345

✔ Public fields can be accessed anywhere.
✔ Private fields (#) can only be used inside the class.

🔹 Getters & Setters

We can use getters and setters to control property access.

✅ Example: Using Getters & Setters

class User {
    constructor(name) {
        this._name = name;
    }

    get name() {
        return this._name.toUpperCase();
    }

    set name(value) {
        if (value.length < 3) {
            console.log("Name must be at least 3 characters long.");
            return;
        }
        this._name = value;
    }
}

const user = new User("Bob");
console.log(user.name); // ✅ Output: BOB (getter modifies output)

user.name = "Al"; // ❌ Output: Name must be at least 3 characters long.

✔ The get method retrieves data.
✔ The set method validates before assigning values.

🔹 Static Methods (Class-Level Methods)

Static methods belong to the class itself instead of an instance.

✅ Example: Using static Methods

class MathUtils {
    static add(a, b) {
        return a + b;
    }
}

console.log(MathUtils.add(5, 3)); // ✅ Output: 8

✔ No need to create an instance to use add().

🔹 Class Inheritance (extends & super)

A class can inherit from another class using extends.

✅ Example: Inheriting from a Class

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

    makeSound() {
        console.log("Some generic animal sound");
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name); // Calls parent class constructor
        this.breed = breed;
    }

    makeSound() {
        console.log("Woof! Woof!");
    }
}

const myDog = new Dog("Buddy", "Golden Retriever");
myDog.makeSound(); // ✅ Output: Woof! Woof!
console.log(myDog.name); // ✅ Output: Buddy

✔ super(name) calls the parent class constructor.
✔ Dog overrides the makeSound() method.

🎯 Summary

✔ Classes provide a clean way to define objects.
✔ Constructor initializes properties when creating an instance.
✔ Class fields can be public or private (#).
✔ Getters & Setters allow controlled property access.
✔ Static methods belong to the class itself.
✔ extends & super enable class inheritance.

🚀 Want more examples? Let me know! 😊