Tutorial Playlist

JavaScript Tutorial: Learn JavaScript from Scratch

Overview

An Introduction to JavaScript: Here Is All You Need to Know

Lesson - 1

JavaScript Hello World: Here's What You Need To Know

Lesson - 2

All You Need to Know About JavaScript Arrays

Lesson - 3

Using Array Filter In JavaScript to Filter Array Elements

Lesson - 4

Everything You Need to Know About Array Reduce JavaScript

Lesson - 5

Introduction To JavaScript Loops: Do-While, For, For-In Loops

Lesson - 6

All You Need to Learn About Javascript Functions

Lesson - 7

The Best Guide on How to Implement JavaScript Closures

Lesson - 8

JavaScript “This” Keyword and How to Implement It

Lesson - 9

How to Implement JavaScript Form Validation

Lesson - 10

An Introduction Guide To JavaScript RegEx

Lesson - 11

How to Validate an Email Address in JavaScript?

Lesson - 12

All You Need to Know About JavaScript Promises

Lesson - 13

How to Implement JavaScript Async/Await

Lesson - 14

JavaScript DOM Tutorial: 2020 Edition

Lesson - 15

JavaScript Objects: Properties, Methods, and Accessors

Lesson - 16

An Introduction to Javascript Games: The Best Guide

Lesson - 17

An Easy Guide To Build A Calculator App In JavaScript

Lesson - 18

Javascript Projects: The Best Guide

Lesson - 19

What is OOP in JavaScript? How is it Implemented?

Lesson - 20

The Best Guide to Understanding JavaScript Learning Path

Lesson - 21

Java Vs .NET: Which Is the Best Technology to Choose?

Lesson - 22

Top 40 JavaScript Interview Questions You Should Know

Lesson - 23

Typeof in JavaScript: Checking Data Types Using the Typeof Operator

Lesson - 24

Tips and Tricks That You Should Know Before Going to a Coding Interview

Lesson - 25

Callback Functions in JavaScript

Lesson - 26
What is OOP in JavaScript? How is it Implemented?

JavaScript is a prototype based programming language. It uses an object as a template to get the properties of other objects. In this article on OOP in JavaScript, you will learn about how Object-oriented programming is incorporated in JavaScript.

What Is 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 breaks down a problem into several entities called objects and builds data and functions around these objects. 

FREE Java Certification Training

Learn A-Z of Java like never beforeEnroll Now
FREE Java Certification Training

communication

Basic concepts of Object-oriented Programming 

Objects 

Objects are the basic run-time bodies in an object-oriented framework. They may represent a place, a person, an account, a table of data, or anything that the program needs to handle. Objects can also represent user-defined data such as vectors, time, and lists.

Consider two objects, “customer” and “account” in a program. The customer object may send a message requesting the bank balance. 

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. 

OOP Concepts in JavaScript

Now that you are familiar with OOP concepts, this section will show you how JavaScript implements them. 

Creating Objects in JavaScript

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

var student = {

        name: "Chris",

        age: 21,

        studies: "Computer Science",

    };

    document.getElementById("demo").innerHTML = student.name + " of the age " + student.age + " studies " + student.studies;

  • Creating objects using the new keyword.

var student = new Object();

    student.name = "Chris",

    student.age=21,

    student.studies = "Computer Science";

    document.getElementById("demo").innerHTML = student.name + " of the age " + student.age + " studies " + student.studies;

  • Creating an object using the object constructor. 

function stud(name, age, studies){

        this.name = name;

        this.age = age;

        this.studies = studies;

    }

    var student = stud("Chris", 21, "Computer Science");

    document.getElementById("demo").innerHTML = student.name + " of the age " + student.age + " studies " + student.studies;

The output for all three scenarios is 

elements-oop

Full Stack Java Developer Course

In Partnership with HIRIST and HackerEarthEXPLORE COURSE
Full Stack Java Developer Course

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()); 

The output of the above code is 

creating-oop

Encapsulation in JavaScript

Encapsulation includes wrapping the property and the function within a single unit. Consider the following example: 

class Emp_details{ 

    constructor(name,id){ 

        this.name = name; 

        this.id = id; 

    } 

    add_Address(add){ 

        this.add = add; 

    } 

    getDetails(){ 

        console.log(`Employee Name: ${this.name}, Address: ${this.add}`); 

    } 

let person1 = new Emp_details('Anand',27); 

person1.add_Address('Bangalore'); 

person1.getDetails(); 

Here, the class holds the data variables name and id along with the functions add_Address and getDetails. All are encapsulated within the class Emp_details. 

The output of the above code is: 

console-oop

These are some basics of Object-oriented programming concepts in JavaScript. 

Master the JavaScript programming language in an all-inclusive JavaScript Certification training program that includes complete JavaScript fundamentals, jQuery, Ajax, and more.

Next Steps

We hope this article on Object-oriented Programming in JavaScript helped you. 

To learn more about JavaScript and perhaps make a career as a developer, certification will come in handy. It is highly recommended and could catapult your coding career. Simplilearn's JavaScript Certification Training entails the fundamentals of JavaScript, including the enumeration and elaboration of various data types in JavaScript, an explanation of loops and conditional statements in JavaScript, and an overview of the concepts of objects and variables in JavaScript..

If you have any questions or feedback, let us know in the comments section. Our experts will get back to you ASAP!

About the Author

Chinmayee DeshpandeChinmayee Deshpande

Chinmayee is a Research Analyst and a passionate writer. Being a technology enthusiast, her thorough knowledge about the subject helps her develop structured content and deliver accordingly.

View More
  • Disclaimer
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.