Classes and Objects in Javascript | Lecture 10

 

In JavaScript, classes are templates for creating objects, and objects are instances of classes. Classes encapsulate data and methods to model real-world entities.

Declaring a Class

A class is defined using the class keyword, and it typically contains:

  • Constructor: A special method for initializing the object.
  • Methods: Functions defined within the class.

Example: Creating a Class and an Object

class Person {

  // Constructor to initialize the object

  constructor(name, age) {

    this.name = name; // Instance property

    this.age = age;

  }

 

  // Method

  greet() {

    return `Hello, my name is ${this.name} and I am ${this.age} years old.`;

  }

}

 

// Create an object (instance) of the class

const person1 = new Person("John", 30);

 

// Access properties and methods

console.log(person1.name); // Output: John

console.log(person1.age); // Output: 30

console.log(person1.greet()); // Output: Hello, my name is John and I am 30 years old.

Example: Adding Methods and Properties

class Car {

  constructor(make, model, year) {

    this.make = make;

    this.model = model;

    this.year = year;

  }

 

  // Method

  start() {

    return `${this.make} ${this.model} is starting...`;

  }

 

  // Method

  stop() {

    return `${this.make} ${this.model} has stopped.`;

  }

}

 

// Create objects (instances)

const car1 = new Car("Toyota", "Corolla", 2020);

const car2 = new Car("Honda", "Civic", 2021);

 

console.log(car1.start()); // Output: Toyota Corolla is starting...

console.log(car2.stop()); // Output: Honda Civic has stopped.

Example: Inheritance (Extending a Class)

Inheritance allows a class to inherit properties and methods from another class.

class Animal {

  constructor(name) {

    this.name = name;

  }

 

  speak() {

    return `${this.name} makes a sound.`;

  }

}

 

// Subclass (inherits from Animal)

class Dog extends Animal {

  constructor(name, breed) {

    super(name); // Call the parent class constructor

    this.breed = breed;

  }

 

  speak() {

    return `${this.name} barks.`;

  }

}

 

const animal = new Animal("Generic Animal");

console.log(animal.speak()); // Output: Generic Animal makes a sound.

 

const dog = new Dog("Rex", "Labrador");

console.log(dog.speak()); // Output: Rex barks.

console.log(dog.breed); // Output: Labrador

Example: Static Methods

Static methods are called on the class itself, not on instances of the class.

class MathOperations {

  static add(a, b) {

    return a + b;

  }

 

  static subtract(a, b) {

    return a - b;

  }

}

 

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

console.log(MathOperations.subtract(10, 4)); // Output: 6

Example: Getters and Setters

Getters and setters are used to control access to object properties.

class Rectangle {

  constructor(width, height) {

    this.width = width;

    this.height = height;

  }

 

  // Getter

  get area() {

    return this.width * this.height;

  }

 

  // Setter

  set area(value) {

    this.width = Math.sqrt(value);

    this.height = Math.sqrt(value);

  }

}

 

const rect = new Rectangle(10, 20);

console.log(rect.area); // Output: 200

 

rect.area = 400; // Setting a new area

console.log(rect.width); // Output: 20

console.log(rect.height); // Output: 20

Key Points:

  • Classes in JavaScript are syntactic sugar over the prototype-based inheritance.
  • Objects are instances of classes.
  • Use classes to encapsulate related data and behavior for easier maintenance and readability.

 

Comments

Post a Comment

Popular posts from this blog

Destructuring in JavaScript | Lecture 5

  Destructuring in JavaScript is a syntax for unpacking values from arrays or properties from objects into distinct variables. This feature simplifies extracting data, making your code cleaner and more readable. Here are examples of destructuring for both arrays and objects: 1. Destructuring Arrays const fruits = ['apple', 'banana', 'cherry'];   // Basic Destructuring const [first, second] = fruits; console.log(first); // "apple" console.log(second); // "banana"   // Skipping Elements const [, , third] = fruits; console.log(third); // "cherry"   // Default Values const [a, b, c = 'default fruit'] = ['mango', 'pear']; console.log(c); // "default fruit"   // Rest Pattern const [d, ...rest] = fruits; console.log(rest); // ["banana", "cherry"] 2. Destructuring Objects const user = {   name: 'John',   age: 30,   count...
Read more

ECMA Script 6 Introduction of topics | Lecture 1

Image
ECMA Script 6 Introduction of topics 1. Let and Const let : Block-scoped variable. const : Block-scoped constant. let x = 10; x = 20; // Allowed   const y = 30; // y = 40; // Error: Assignment to constant variable   2. Arrow Functions Concise syntax for defining functions. // Regular function function add(a, b) {   return a + b; }   // Arrow function const add = (a, b) => a + b;   console.log(add(5, 3)); // Output: 8   3. Template Literals For string interpolation and multiline strings. const name = "John"; const greeting = `Hello, ${name}!`; console.log(greeting); // Output: Hello, John!   const multiline = `This is a multiline string.`; console.log(multiline);   4. Default Parameters Default values for function parameters. function greet(name = "Guest") {   return `Hello, ${name}!`; }   console.log(greet()); // Output: Hello, Guest! console.log(greet(...
Read more