Javascript Classes

What are Javascript Classes?

In essence, a class is a blueprint for objects. Just as an architect's plans are used to build houses that share the same design, a Javascript class is used to create objects that share the same properties and methods. This concept is fundamental to understanding object-oriented programming, making code more reusable, and systems easier to maintain.

JavaScript Class Syntax Fundamentals

Understanding the basic syntax of Javascript classes is crucial to utilising their power in programming projects. The syntax for creating a class involves the class keyword, followed by the class name and braces that encapsulate the class body.

class Car {
  constructor(brand) {
    this.brand = brand;
  }
  display() {
    console.log('The brand of the car is ' + this.brand);
  }
}

In the example above, Car is a class with a constructor method and a display method. The constructor method is a special function that creates and initializes an object instance of the class. The this keyword refers to the current instance of the class.

Javascript Class Properties: A Primer

Properties are variables that belong to a class. They represent the attributes or characteristics of the objects created from the class. Understanding how to define and use properties is central to leveraging the full potential of Javascript classes.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  describe() {
    return this.name + ' is ' + this.age + ' years old.';
  }
}

In the Person class example above, name and age are properties of the class. They are defined within the constructor and can be used within any method of the class, like the describe method, which uses these properties to return a string describing the person.

Diving Into Javascript Class Constructors

Understanding the pivotal role of constructors within Javascript classes paves the way for mastering object-oriented programming in Javascript. This section delves into class constructors, highlighting their importance, defining their syntax, and showcasing their practical use through examples.

The Role of the Javascript Class Constructor

The constructor in a Javascript class serves as the blueprint for initializing new objects. When you create a new instance of a class, the constructor function is automatically called, setting up the object with its initial properties and behaviors. The constructor makes it straightforward to create multiple objects with the same properties but different values.

How to Define a Javascript Class Constructor

Defining a constructor within a Javascript class is accomplished by using the constructor method. This special method is syntactically similar to functions, but it’s exclusively used within class definitions. The constructor can take parameters, allowing you to pass values to the object when it is instantiated.

Here’s the basic syntax for a class constructor:

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

In this example, Vehicle is a class with a constructor that takes two parameters: make and model. These parameters are used to initialise the class’s properties when an instance of the class is created.

Simplifying a Javascript Class Example with Constructors

Let's simplify the concept of constructors with a practical example. Suppose we want to model a simple Book class, which contains properties for title, author, and year of publication. By utilising a constructor, we can easily create multiple instances of books with different characteristics.

class Book {
  constructor(title, author, year) {
    this.title = title;
    this.author = author;
    this.year = year;
  }
  getSummary() {
    return `${this.title} was written by ${this.author} in ${this.year}.`;
  }
}

This Book class includes a constructor and a getSummary method. The constructor is used to initialise the book's properties upon creation, while getSummary is a method defined to output a brief description of the book.

Exploring Inheritance with Javascript Classes

Delving into inheritance within Javascript classes unveils a powerful paradigm for reusing and managing code effectively. This exploration introduces the principles of inheritance, how to implement it using the extends keyword, and practical examples to consolidate understanding.

What Does Javascript Class Inheritance Mean?

Inheritance is a fundamental concept in object-oriented programming that promotes code reusability and hierarchy. In Javascript, it allows developers to create a class hierarchy, where subclasses can inherit from superclasses, reducing redundancy and fostering a more organised and scalable codebase.

Mastering Javascript Class Extends Keyword

The extends keyword in Javascript plays a pivotal role in facilitating class inheritance. It enables a subclass to inherit properties and methods from a superclass, forming a hierarchical relationship between classes.

Usage of the extends keyword ensures that the subclass not only acquires the superclass’s properties and methods but can also have its unique attributes or override inherited methods.

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}
class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

In this example, Dog is a subclass of Animal. By using the extends keyword, Dog inherits properties and methods from Animal, but also defines its method speak to override the one from Animal.

Crafting a Javascript Class Example with Inheritance

Crafting examples with inheritance in Javascript offers a practical insight into how classes can be structured to make code more reusable and scalable. Let’s consider an example where we extend a base class to create more specific subclasses.

class Shape {
  constructor(name) {
    this.name = name;
  }
  display() {
    console.log(`This is a ${this.name}.`);
  }
}
class Circle extends Shape {
  constructor(radius) {
    super('circle');
    this.radius = radius;
  }
  area() {
    return Math.PI * this.radius * this.radius;
  }
}

Here, Circle is a subclass of Shape. It uses the extends keyword to inherit from Shape, and super to call the constructor of Shape, assigning 'circle' as the name. Besides inherited properties and methods, Circle also introduces an area method specific to circles.

Implementing Methods in Javascript Classes

Implementing methods in Javascript classes unlocks a world of possibilities for adding functionality to class instances. Methods are functions associated with a class that enable instances of the class to perform actions or operations. This section will guide you through defining and utilising methods within classes, their significance in programming, and provide a practical example for a clearer understanding.

Defining and Utilising Javascript Class Methods

Defining methods within a Javascript class is similar to defining a regular function, but with the context provided by the class itself. Methods can perform operations using the class’s properties and can be called on any instance of the class. They are defined inside the class block, using a concise syntax without the function keyword.

class Calculator {
  constructor(value) {
    this.value = value;
  }

  add(number) {
    this.value += number;
    return this;
  }

  subtract(number) {
    this.value -= number;
    return this;
  }
}

In the Calculator class above, the add and subtract methods allow the manipulation of the class’s value property. Notice the methods allow chaining by returning the instance (this).

The Significance of Javascript Class Methods in Programming

Javascript class methods play a crucial role in programming, enabling objects to not just hold data but to actually do something with that data. Methods enhance encapsulation, one of the core concepts in object-oriented programming, by keeping the actions an object can perform closely bundled with the object itself.

Furthermore, methods promote code reuse and maintainability. By defining a method once in a class, any instance of that class can utilise the method without the need to duplicate code.

Practical Javascript Class Example Utilising Methods

A practical example will solidify understanding of how methods enhance classes in Javascript. Consider a class Rectangle, which will include methods to calculate the rectangle’s area and perimeter.

class Rectangle {
  constructor(length, width) {
    this.length = length;
    this.width = width;
  }

  area() {
    return this.length * this.width;
  }

  perimeter() {
    return 2 * (this.length + this.width);
  }
}

const myRectangle = new Rectangle(10, 5);
console.log(myRectangle.area());  // Outputs: 50
console.log(myRectangle.perimeter());  // Outputs: 30

The Rectangle class defines two methods: area and perimeter. These methods operate on the class properties length and width to calculate and return the rectangle’s area and perimeter. An instance of the Rectangle class can easily utilise these methods to get the area and perimeter, showcasing the power of incorporating methods into classes.