Object Oriented Programming in JavaScript

In this blog, we take an in-depth look at JavaScript, a prototype-based procedural language that incorporates functional and object-oriented programming paradigms. We also explore how JavaScript uses the concepts of classes, objects, encapsulation, and inheritance, and learn about ES6 classes, function scope, closures, and prototypal inheritance.

GraphQL has a role beyond API Query Language- being the backbone of application Integration
background Coditation

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

  1. 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= "[email protected]";
  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 = "[email protected]"
 
  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.

Hi, I am Manish Dube. I am a Javascript & Flutter developer with over 6 years of experience in software development. In my free time, I enjoy playing outdoor games and staying up-to-date with the latest developments in the tech industry.

Want to receive update about our upcoming podcast?

Thanks for joining our newsletter.
Oops! Something went wrong.

Latest Articles

Leveraging Databricks Feature Store for Machine Learning Feature Management

Machine learning is moving fast, and managing data features well has become really important for ML projects to succeed. As companies do more with ML, it's often hard to handle, share, and reuse features across different models and teams. That's where Databricks Feature Store comes in - it's a powerful tool that makes feature management easier and speeds up ML work.

AI/ML
time
10
 min read

Optimizing Bundle Sizes in React Applications: A Deep Dive into Code Splitting and Lazy Loading

In front-end engineering, performance optimization remains a critical concern for developers and businesses alike. As React applications grow in complexity and size, managing bundle sizes becomes increasingly challenging. Large bundle sizes can lead to slower initial page loads, reduced user engagement, and potential loss of business. This article delves into two powerful techniques for optimizing bundle sizes in React applications: code splitting and lazy loading.

Mobile Engineering
time
 min read

Implementing Task Planning and Execution Using LangChain for Complex Multi-Step Workflows

In order to apply LLM to the real world problems, the ability to handle complex, multi-step workflows has become increasingly crucial. LangChain is a powerful framework that has become very popular in the AI community for building complex workflows on top of the LLMs. Today, we're exploring how LangChain can be leveraged for implementing task planning and execution in complex scenarios.

AI/ML
time
5
 min read