Basic JavaScript

Home / Topic / Basic JavaScript / Object-Oriented Programming in JavaScript

Object-Oriented Programming in JavaScript

Object-Oriented Programming (OOP) is a programming paradigm based on the idea of organizing code into objects. JavaScript supports this paradigm and allows the creation of objects and classes, along with features like inheritance and encapsulation. In this chapter, you will learn the basic concepts of OOP and how to implement them in JavaScript.

Classes and Objects

A class is a blueprint or template from which objects are created. An object is an instance of a class, with its own properties and methods.

Defining a Class

In JavaScript, you can define a class using the class keyword. Here is an example of a class called Person:

javascript

"Here we define a class called Person that has a constructor to initialize the name and age. The class also has a method called greet that prints a greeting with the person's name. We create an object called john based on the Person class and call its greet method."

Properties and Methods

Properties are variables that belong to an object and methods are functions that belong to an object. In the previous example, name and age are properties, and greet is a method.

Classes as Templates for Objects

Every time you create an instance of a class using the new keyword, you are creating an object based on that class. Each object can have its own values for the properties.

javascript

"Here we create a new object called alice based on the Person class. The value of the name property for alice is Alice, which is different from the name property value of the john object, even though both objects are based on the same class."

Encapsulation

Encapsulation is the concept of restricting direct access to some of the properties and methods of an object to protect the data. In JavaScript, properties can be considered public or private. Although JavaScript doesn't have access modifiers like other languages, it's possible to simulate encapsulation by using underscores to indicate that a property is private, or by using getter and setter functions.

javascript

"In this example, the brand property is encapsulated using an underscore to indicate that it's private. We use getter and setter methods to access and modify this property in a controlled manner."

Inheritance

Inheritance is a key principle in OOP that allows a class to inherit properties and methods from another class. In JavaScript, you can use the extends keyword to create a class that inherits from another.

javascript

"Here we create an Animal class that has a name property and a speak method. Then, we create a Dog class that extends from Animal and overrides the speak method to print that the dog barks. We create a dog object based on the Dog class and call its speak method."

In this example, Dog inherits the name property from Animal, but overrides the speak method to provide a specific implementation for dogs.

Polymorphism

Polymorphism allows methods from different classes to be called in the same way, although the behavior is different depending on the class. As we saw in the inheritance example, the Dog class overrides the speak method from the Animal class, showing different behavior.

javascript

"Here we add a Cat class that also extends from Animal, but overrides the speak method so the cat meows. We create a cat object based on the Cat class and call its speak method."

This is an example of polymorphism, where both Dog and Cat have a speak method, but each class implements it differently.

Abstraction

Abstraction is the concept of hiding complex system details and exposing only what is necessary. In JavaScript, abstraction is achieved by designing classes and methods with clear interfaces, while internal details are encapsulated. There is no direct way to define abstract classes in JavaScript, but you can use base classes to establish interfaces.

javascript

"Here we create a Vehicle class with a start method that throws an error if not implemented. Then, we create a Bike class that extends from Vehicle and provides an implementation for the start method. We create a myBike object based on the Bike class and call its start method."

In this example, the Vehicle class acts as an abstract base class that defines an interface for its subclasses.

Conclusion

Object-Oriented Programming in JavaScript provides a powerful and structured way to organize and manage code. In this chapter, you have learned about classes, objects, encapsulation, inheritance, polymorphism, and abstraction. These techniques will allow you to write more modular and reusable code.

Back to previous chapter

Mark as read and continue

Ask me anything