Class

JavaScript Object-Oriented Programming - Class Tutorial

Table of Contents

1. Introduction to Object-Oriented Programming (OOP)

2. What is a Class in JavaScript?

3. Defining a Class in JavaScript

4. Constructor Method

5. Creating Objects from a Class

6. Class Methods

7. Class Properties (Fields)

8. Getters and Setters

9. Inheritance in JavaScript Classes

10. Static Methods

11. Practical Examples

    • Creating a Basic Class

    • Adding Methods and Properties

    • Implementing Inheritance

12. Conclusion

---

1. Introduction to Object-Oriented Programming (OOP)

Welcome to the Codes with Pankaj tutorial on Object-Oriented Programming (OOP) in JavaScript! In this tutorial, we will explore how to use classes in JavaScript to implement OOP concepts. Let’s dive in!

Object-Oriented Programming (OOP) is a programming paradigm that organizes code into objects that contain both data (properties) and behavior (methods). OOP helps in creating reusable, modular, and maintainable code.

2. What is a Class in JavaScript?

A class in JavaScript is a blueprint for creating objects. It defines the structure and behavior (methods) that the objects created from it will have. Although JavaScript has always supported object-oriented programming, classes were formally introduced in ECMAScript 6 (ES6) to simplify the syntax.

3. Defining a Class in JavaScript

You can define a class in JavaScript using the class keyword.

Example:

class Person {
    // Constructor method
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}

In this example, we defined a Person class with a constructor that initializes the name and age properties.

4. Constructor Method

The constructor method is a special method for creating and initializing objects created with a class. It is called automatically when a new object is created from the class.

Example:

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

When you create a new Person object, the constructor method is called:

let person1 = new Person("John", 30);
console.log(person1.name);  // Output: John
console.log(person1.age);   // Output: 30

5. Creating Objects from a Class

You can create objects from a class using the new keyword.

Example:

let person1 = new Person("Alice", 25);
let person2 = new Person("Bob", 35);

console.log(person1.name);  // Output: Alice
console.log(person2.name);  // Output: Bob

6. Class Methods

Methods in a class are functions that define the behavior of the objects created from the class.

Example:

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

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

let person1 = new Person("Alice", 25);
person1.greet();  // Output: Hello, my name is Alice.

7. Class Properties (Fields)

Class properties, also known as fields, store data specific to each object. You can define them in the constructor or outside the constructor using the class field syntax.

Example:

class Person {
    name = "Unknown";
    age = 0;

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

8. Getters and Setters

Getters and setters allow you to define methods that are accessed like properties. They are useful for controlling access to class properties.

Example:

class Person {
    constructor(name, age) {
        this._name = name;
        this._age = age;
    }

    // Getter for name
    get name() {
        return this._name;
    }

    // Setter for name
    set name(newName) {
        this._name = newName;
    }
}

let person1 = new Person("Alice", 25);
console.log(person1.name);  // Output: Alice
person1.name = "Bob";
console.log(person1.name);  // Output: Bob

9. Inheritance in JavaScript Classes

Inheritance allows you to create a new class based on an existing class. The new class (child class) inherits properties and methods from the existing class (parent class).

Example:

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

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

class Dog extends Animal {
    speak() {
        console.log(`${this.name} barks.`);
    }
}

let dog = new Dog("Buddy");
dog.speak();  // Output: Buddy barks.

10. Static Methods

Static methods are defined on the class itself rather than on instances of the class. They can be called directly on the class without creating an object.

Example:

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

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

11. Practical Examples

Creating a Basic Class

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

    displayInfo() {
        console.log(`This car is a ${this.brand} ${this.model}.`);
    }
}

let car1 = new Car("Toyota", "Camry");
car1.displayInfo();  // Output: This car is a Toyota Camry.

Adding Methods and Properties

class Student {
    constructor(name, grade) {
        this.name = name;
        this.grade = grade;
    }

    displayStudentInfo() {
        console.log(`${this.name} is in grade ${this.grade}.`);
    }
}

let student1 = new Student("John", 10);
student1.displayStudentInfo();  // Output: John is in grade 10.

Implementing Inheritance

class Vehicle {
    constructor(make, model) {
        this.make = make;
        this.model = model;
    }

    displayInfo() {
        console.log(`${this.make} ${this.model}`);
    }
}

class Motorcycle extends Vehicle {
    displayInfo() {
        console.log(`${this.make} ${this.model} is a motorcycle.`);
    }
}

let motorcycle = new Motorcycle("Harley-Davidson", "Iron 883");
motorcycle.displayInfo();  // Output: Harley-Davidson Iron 883 is a motorcycle.

12. Conclusion

In this detailed tutorial, we've explored how to implement Object-Oriented Programming (OOP) in JavaScript using classes. By understanding classes, constructors, methods, inheritance, and static methods, you can create modular, reusable, and maintainable code.

For more tutorials and examples, visit www.codeswithpankaj.com! Happy coding!

---