JavaScript 101: Object Oriented Programming

This article is part of the JavaScript 101 series, you can find the previous part on the following link: JavaScript 101: Scope and Closures.

What is Object Oriented Programming in JavaScript

Object-Oriented Programming is a programming paradigm or a way to approach and solve a problem. The basic idea behind object-oriented programming is the ability to model real-world objects that we want to represent in our program. Every object we model can have data which is the properties (fields or state) and behavior (methods) of that particular object. There are couple major concepts behind Object-Oriented Programming in JavaScript like Encapsulation and Inheritance.

Class and Objects

What is a class? class is a template or blueprint for creating objects, for example, we can define a class car and put properties like name, tank capacity, and horsepower, and methods for starting the car, opening windows. To instantiate new objects from a class, the class need to have a constructor too and we can instantiate (create) as many objects as we want from our class, in our case cars, so the class is like a factory for the cars and the objects are the cars itself. We will do our examples with the EcmaScript 6 syntax and the new the class keyword. Let's see a simple example in JavaScript:

class Car { 
    constructor(input_name, input_horswpower) {
    this.name = input_name;
    this.horsepower = input_horswpower;
  } 

  turnOn(){
    return 'The ' + this.name + ' is turned on';
  }

  setName(newName){
    this.name = newName;
  }
}

In our example the function Car is the class (blueprint) for making new cars, every car has a name and a horsepower given with the arguments. To create an object of the car class we need to call the class and pass the required arguments, like in the following example:

var carOne = new Car('BMW', 180);
var carTwo = new Car('Toyota', 90);

carOne.turnOn();
carTwo.turnOn();

Here we are instantiating two objects of the class car both have different names and horsepower properties, and both have a method turnOn(). We can create classes witout arguments for the constructor too if we want to, also we can use the methods to add functionality to our objects and call them carOne.turnOn();. With the properties and methods, we can add as many as we want functionalities, to model real-world objects. To have better understanding of the Object-Oriented Programming we need to check some of the important concepts in JavaScript like encapsulation and inheritance.

Encapsulation

Encapsulation is an OOP concept that keeps the data from outside interference and misuse, the data encapsulation is also known as data hiding. This means we should not get the horsepower or the car name in our example like accesing simple properties in JavaScript.

carOne.name = 'Mercedes';   //Don't use it this way.
carOne.setName('Mercedes')  //Use this instead.

Objects, like our cars, should have exclusive control of their data (properties), we should not modify it like in the first example, instead we should use a dedicated methods (getters and setters) like in the second example.

Inheritance

Inheritance allows us to create a new class by extending an existing class and inheriting the properties and methods from the parent class. For an example we can have a parent class Car and child classes like Bmw, Toyota, etc, and they will inherit the properties and the methods from the parent, so we are not needed to make every car to turn on or open windows, etc.

JavaScript support for Object Oriented Programming is not on the same level as some languages like Java, but it is still getting better. Originally JavaScript was a more of a prototype-based and functional programming language, not intended for large scale applications. The Object Oriented was built on top of the original prototype based technique. There is much more about Object Oriented Programming, this is just an introduction for beginners to get an idea of the paradigm.

Next part: JavaScript 101: ES6 and Beyond.