Object Oriented Programming in JavaScript

JavaScript is a Prototype-based programming paradigm. It is not an OOP language. But it has support for it. It has the class keyword, which is just a syntactic sugar over prototypes. We actually create prototypes in javascript, and not classes. The class keyword is there to make javascript look like an OOP language.
Javascript uses objects and follows the principles of OOP, but it does this using pure functions, which is a property of the functional programming paradigm (FP). JavaScript follows both OOP and FP and is actually a procedural language.
Note: JavaScript is not an object-oriented language. Neither is it completely a functional language. JavaScript is a prototype-based procedural language. It supports both functional and object-oriented patterns of programming.
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.

• Classes
• Objects
• Encapsulations
• Polymorphism

Classes in JavaScript

JavaScript is a prototype-based language, and it doesn't have classes in it. We define the templates for objects using constructor functions or prototypes.
But JavaScript does have support for the class keyword.

ES6 Classes

Let's look at the ES6 way of defining classes, using the class keyword and then we'll see how classes were defined traditionally.

//Defining the class
class Student{ 
  constructor(firstName, lastName) { 
  this.firstName = firstName,
  this.lastName = lastName
  getName = function() { 
    return '${firstName} ${lastName}' 
  }
}

// Creating instances using the "new" keyword
const student1 = new Student("Deep", "Singh"); 
const student2 = new Student("Rohan", "Roy");

This way, we create a class using the class keyword. Define constructor function and all the other data functions inside the class declaration function. Then we create instances for this class using the new keyword.

Traditional Way of Class Simulation

This is how classes were defined before JavaScript started supporting the class keyword. That is before ES6 came up.

function Student(firstName, lastName){ 
 this.firstName = firstName 
 this.lastName = lastName 
}
Student.prototype.getName = function() { 
  return '${this.firstName} ${this.lastName}' 
}
const student1 = new Student("Mary", "Green");
const student2 = new Student("Lary", "Smith"); ;
console.log(studentl.getName()); 
console.log(student2.firstName);

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.

Object can be created in two ways in JavaScript:

1. Using an Object Literal

//Defining object
let students = {
  first_name: 'Manish',
  last_name: 'Dube', 
  
  //method 
  getStudentDetail : function() { 
   return ("The name of the student is ${person.first_name}      ${person.last_name}")
  }


  //object within object :
  address : {
    address_linel: 'SK Road',
    address_line2: 'Powai',
    pincode: '400092',
    city: 'Mumbai',
    state: 'Maharashtra'
  }
}
console. log(person.getStudentDetail());
console.log(person.address.city);

Output : 
Manish Dube
Mumbai

2. Using an Object Constructor: 

// using a constructor
function students(first_name, last_name) { 
  this.first_name = first_name; 
  this.last_name = last_name;
}
//creating new instances of person object 
let student1 = new students('Manish', 'Dube'); 
let student2 = new students('Michal', 'Mishra'); 

console.log(studentl.first_name);
console.log(`${student2.first_name} ${student2.last_name}`);

Output:
Manish
Michal Mishra

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 that no one 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 printUserEmail() {
  const email= "abc@gmail.com";
  console.log("Access Email from inside: ", email);
}
// Calling the function which internally defines the email
printUserEmail(); 
// Trying to access email from outside the function which defines it 
console.log("Access Email from outside: ", email);

Output: 

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 sendEmail() {
   const email = "abc@gmail.com"
 
  const printEmail = function() {
     console.log("Accessing Email from inside: ", email);
  }
  printEmail();
}
// Calling the function which internally defines the message
sendEmail();

// Trying to access message from outside the function which defines it
console.log("Accessing Email from outside: ", email);

Output:

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

Inheritance

JavaScript lets objects inherit properties from parent objects or any other objects. It uses the concept of prototypal inheritance.

Prototype

JavaScript is a prototype-based language. The objects created here can inherit the properties and methods from other objects or their parent ones.

Let's create an object and console it.

We only defined the property name, age & mobile  to the user Object, but we can see a lot of other methods. We didn't define them! These methods are inherited from the parent object, i.e., the prototype for the object data structure. When we create the object user Object, we basically inherit all the properties object data structure.

In our next blog, we compare and contrast asynchronous programming in Dart and JavaScript, discussing their similarities and differences.