Introduction to Object Oriented Programming in JavaScript

As JavaScript is widely used in Web Development, in this article we would explore some of the Object Oriented mechanism supported by JavaScript to get most out of it. Some of the common interview question in JavaScript on OOPS includes,- “How Object Oriented Programming is implemented in JavaScript? How they differ from other languages? Can you implement Inheritance in JavaScript and so on…”

There are certain features or mechanisms which makes a Language Object Oriented like:

  • Object
  • Classes
  • Encapsulation
  • Inheritance

Let’s dive into the details of each one of them and see how they are implemented in JavaScript.

  1. Object – An Object is a unique entity which contains property and methods. For example “car” is a real life Object, which have some characteristics like color, type, model, horsepower and performs certain action like drive. The characteristics of an Object are called as Property, in Object Oriented Programming and the actions are called methods. An Object is an instance of a class. Objects are everywhere in JavaScript almost every element is an Object whether it is a function,arrays and string.
    Object can be created in two ways in JavaScript:

    • Using an Object Literal
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      // Defining Object 
      var person = {
        
          // Propertise
          first_name: "Sumit",
          last_name: "Ghosh",
        
          // Methods
          getName: function () 
          {
              return "Person name is " + this.first_name +
                  " " + this.last_name;
          },
        
          // Object within Object 
          phone_number: 
          {
              Mobile: "12345",
              LandLine: " 678910"
          }
      }
      console.log(person.getName());
      console.log("Persons First Name " + person.first_name
          + " Landline number " + person.phone_number.LandLine);

      chevron_right

      
      

      Output:
      Output_1_1

    • Using an Object Constructor
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      // construtor to initialize variables
      function person(first, last) {
          this.firstName = first;
          this.lastName = last;
      }
        
      // using prototype to define methods
      person.prototype.getDetails = function () {
          return "Person name is " + this.firstName +
              " " + this.lastName;
      }
        
        
      var P1 = new person("Sumit", "Ghosh");
      console.log(P1.firstName);
      console.log(P1.getDetails());

      chevron_right

      
      

      Output:
      Output_2_1

    There is another way of creating a JavaScript Object i.e. by using new Keyword but it is similar to creating Object with Object Literal.

  2. Classes – Classes are blueprint of an Object.A class can have many Object, because class is a template while Object are instances of the class or the concrete implementation.
    Before we move further into implementation, we should know unlike other Object Oriented Language their is no classes in JavaScript we have only Object. To be more precise, JavaScript is a prototype based object oriented language, which means it doesn’t have classes rather it define behaviors using constructor function and then reuse it using prototype.
    Note :- Even the classes provided by ECMA2015 are objects.



    JavaScript classes, introduced in ECMAScript 2015, are primarily syntactical sugar over JavaScript’s existing prototype-based inheritance. The class syntax is not introducing a new object-oriented inheritance model to JavaScript. JavaScript classes provide a much simpler and clearer syntax to create objects and deal with inheritance.
    Mozilla Developer Network


    Example:
    Lets use ES6 classes then we will look into traditional way of defining Object and simulate them as classes.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    // Define class using ES6
    class Employee {
        // Defining connstructor 
        // to initialize the property
        constructor(Ename, Eid) {
            this.Ename = Ename;
            this.Eid = Eid;
        }
      
        // Method returns employee details
        getDetails() {
            return "Employee name = " + this.Ename +
                ", Employee id = " + this.Eid;
        }
    }
      
    // Creating an Employee Object 
    var Emp1 = new Employee("Sumit", "1234");
      
    // Printing the Employee Details
    console.log(Emp1.getDetails());

    chevron_right

    
    

    Output:
    Output_3_1
    Traditional Way.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    // Defining class in a Traditional Way.
    function Employee(Ename, Eid) {
        this.Ename = Ename;
        this.Eid = Eid;
    };
      
    Employee.prototype.getDetails = function(){
        return "Employee name = " + this.Ename +
                ", Employee id = " + this.Eid;
    }
      
    var Emp1 = new Employee("Sumit", "1234");
    console.log(Emp1.getDetails());

    chevron_right

    
    

    Output:
    Output_4_2
    As seen in the above example it is much simpler to define and reuse object in ES6. Hence, we would be using ES6 in all our examples.

  3. Encapsulation – The process of wrapping property and function within a single unit is known as encapsulation.
    Let’s understand encapsulation with an example.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    class Person {
        constructor(name, id) {
            this.name = name;
            this.id = id;
        }
        add_Address(add) {
            this.add = add;
        }
        details() {
            return "Name is = " + this.name +
                ", Student id = " + this.id + ", Address = " + this.add;
        }
    }
    var person = new Person("Sunny", "14783");
    person.add_Address("Delhi");
    console.log(person.details());

    chevron_right

    
    

    Output:
    Output_3_1
    In the above example we simply create an person Object using the constructor and Initialize it property and use it functions we are not bother about the implementation details. We are working with an Objects interface without considering the implementation details.
    Sometimes encapsulation refers to hiding of data or data Abstraction which means representing essential features hiding the background detail. Most of the OOP languages provide access modifiers to restrict the scope of a variable, but their are no such access modifiers in JavaScript but their are certain way by which we can restrict the scope of variable within the Class/Object.
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    // Define a Person
    function Person(fname, lname) {
        // This properties are not visible 
        // outside the scope of the object 
        var firstname = fname;
        var lastname = lname;
          
        // This function is not visible outside the 
        // scope of the function
        var getdetails_noaccess = function () {
            return "First name is = " + firstname +
                " Last name is = " + lastname;
        };
      
         // This function is visible outside the 
        // scope of the function
        this.getdetails_access = function () {
            return "First name is = " + firstname +
                ", Last name is = " + lastname;
        };
    }
      
    var person = new Person("Sumit", "Ghosh");
    console.log(person.firstname);
    console.log(person.getdetails_noaccess);
    console.log(person.getdetails_access());

    chevron_right

    
    

    Output:
    Output_3_2
    In the above example we try to access some property(person.firstname) and functions(person.getdetails_noaccess) but it returns undefine while their is a method which we can access from the person object(person.getdetails_access()), by changing the way to define a function we can restrict its scope.

  4. Inheritance – It is a concept in which some property and methods of an Object is being used by another Object. Unlike most of the OOP languages where classes inherit classes, JavaScript Object inherits Object i.e. certain features (property and methods)of one object can be reused by other Objects.
    Lets’s understand inheritance with example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    // Define a Person class
    // It will as a Base class
    // in the inheritance hirarechy
    class Person {
        // Initializing the name
        constructor(name) {
            this.name = name;;
        }
      
        // toString method returns the name
        toString() {
            return "Name of person = " + this.name;
        }
    }
      
    // Defining the student class
    // It is the derived class
    // It extends Person
    class Student extends Person {
        // Initializing the name and id
        constructor(name, Sid) {
            // calling the super class constructor
            super(name);
      
            // Initializing Sid
            this.Sid = Sid;
        }
      
        // toString method returns the student detail
        // Overriding the toString method from base 
        // class
        toString() {
            // Calling the toString method of the base
            // class to get the name
            return super.toString() + ", Student Id = "
                + this.Sid
        }
    }
      
    // creating Object 
    var Student_1 = new Student("Sumit", "GFG_123");
      
    // Printing the name and Sid of Student_1
    console.log(Student_1.toString());

    chevron_right

    
    

    Output:
    Output_4_1
    In the above example we define an Person Object with certain property and method and then we inherit the Person Object in the Student Object and use all the property and method of person Object as well define certain property and methods for Student.
    Note :- The Person and Student object both have same method i.e toString(), this is called as Method Overriding. Method Overriding allows method in child class to have same name and method signature as that of a parent class.

In this article we introduced Object Oriented features in JavaScript, their is a entire book which explains Object Oriented Programming in JavaScript in great details,- ” Object Oriented JavaScript by Stoyan Stefanov”

This article is contributed by Sumit Ghosh. If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above.



My Personal Notes arrow_drop_up

Improved By : Pallavi Yadav