DEV Community

Lamina Busayo
Lamina Busayo

Posted on

OBJECT ORIENTED PROGRAMMING

Object-oriented Programming treats data as a crucial element in program development and doesn't allow it to flow freely around the system. It ties data more securely to the function that operates on it and protects it from accidental modification from an outside function. OOP is a programming paradigm constructed around objects. Individual objects can be modified without affecting other program aspects, so it is easier to update and modify programs written in object-oriented languages. JavaScript is one of those languages that OOP is deeply rooted in.

Features of an Object-Oriented Language

There are four rules or main pillars of Object-oriented programming language. This defines how the data and actions associated with the data; are organized using code.

Object

An object is a data structure containing properties and methods. Consider a student. A student will have characteristics like name, roll number, and class, and he will perform an action, let's say, giving an exam. In object-oriented programming, these characteristics are called data variables. These actions are called data methods.

We create a class called Student and then create instances of this class. These instances are called Objects. Hence, an object is a real instance of a class. Class is nothing but a prototype/blueprint.

Example: John Smith is an instance or object created using the class - Student.

Classes

We know that objects hold the data and the functions to manipulate the data. However, the two can be bound together in a user-defined data type with the help of classes. Any number of objects can be created in a class. Each object is associated with the data of type class. A class is therefore a collection of objects of similar types.

For example, consider the class “Fruits”. We can create multiple objects for this class

Fruit Mango;

This will create an object mango belonging to the class fruit. 

Encapsulation

Encapsulation is the wrapping up/binding of data and function into a single unit called class. Data encapsulation is the most prominent feature of a class wherein the data is not accessible to the outside world, and only those functions wrapped inside the class can access it. These functions serve as the interface between the object’s data and the program.

Inheritance

The phenomenon where objects of one class acquire the properties of objects of another class is called Inheritance. It supports the concept of hierarchical classification. Consider the object “car” that falls in the class “Vehicles” and “Light Weight Vehicles”.

In OOP, the concept of inheritance ensures reusability. This means that additional features can be added to an existing class without modifying it. This is made possible by deriving a new class from the existing one.

Creating Objects in JavaScript

We can create an object using the string literal in JavaScript.

const student = {
        name: "Chris",
        age: 21,
        studies: "Computer Science",
    };

console.log(`${student.name} of the age ${student.age} studies ${student.studies})
Enter fullscreen mode Exit fullscreen mode

OUTPUT: ‘Chris of the age 21 studies Computer Science’

Creating objects using the new keyword.

const student = new Object();
    student.name = "Chris",
    student.age=21,

    student.studies = "Computer Science";

console.log(`${student.name} of the age ${student.age} studies ${student.studies})
Enter fullscreen mode Exit fullscreen mode

OUTPUT: ‘Chris of the age 21 studies Computer Science’

Creating an object using the object constructor.

function stud(name, age, studies){
        this.name = name;
        this.age = age;
        this.studies = studies;
    }
    const student = stud("Chris", 21, "Computer Science");

  console.log(`${student.name} of the age ${student.age} studies ${student.studies})
Enter fullscreen mode Exit fullscreen mode

OUTPUT: ‘Chris of the age 21 studies Computer Science’

Class Implementation in JavaScript

JavaScript uses the ES6 standard to define classes. Consider the following example.

class Cars {
    constructor(name, maker, price) {
      this.name = name;
      this.maker =  maker;
      this.price = price;
    }
    getDetails(){
        return (`The name of the car is ${this.name}.`)
    }
  }
  let car1 = new Cars('Rolls Royce Ghost', 'Rolls Royce', '$315K');
  let car2 = new Cars('Mercedes AMG One', 'Mercedes', '$2700K');
  console.log(car1.name);    
  console.log(car2.maker);  
  console.log(car1.getDetails());
Enter fullscreen mode Exit fullscreen mode

OUTPUT
‘Rolls Royce Ghost’
'Mercedes'
‘The name of the car is Rolls Royce Ghost.

JavaScript Encapsulation

Encapsulation puts the data variables and the data functions together inside a box. Encapsulation ensures that data can only be accessed using the data functions defined inside the class, and abstraction ensures not anyone outside this encapsulated box can access it.

But, we already saw that there is no actual concept of classes in JavaScript. So, JavaScript implements encapsulation using two ways: Function Scope and Closures.

Let's discuss both of them with examples.

Function Scope

When we define a variable or a function inside the function, we can only access it from inside and not from outside the function. This can be one way of implementing abstraction. Look at the example below.

function messageFunc(){
    const message= "Hey there!"
    console.log("Message from  inside: ",message);
}

messageFunc();

console.log("Message from  outside: ",message);
Enter fullscreen mode Exit fullscreen mode

The output for this code snippet says the right message when accessed from inside but throws an error when accessed from outside. Hence, the message is encapsulated.

Closures

We can create a function inside a function, and the inner function will be able to access the local variable defined inside the outer function. This is called closure.

Note: A closure is created every time a function is declared.

function messageFunc(){
    const message = "Hey there!"
    const displayMessage = function(){
        console.log(message);
    }
    displayMessage();
}

messageFunc();

console.log("Message from outside: ",message);
Enter fullscreen mode Exit fullscreen mode

Again, the output says that creating a closure helps encapsulate and restrict the data access only to inside the function.

Top comments (0)