Skip to content
    logo
  • About Us
  • Services
    • Native Mobile Apps
    • Hybrid App Development
    • Web Development
    • Website Design
    • UI/UX Design
    • Outsourcing
    • Quality Assurance
    • Salesforce Consulting
  • Technologies
    • Mobile
      • Android App Development
      • iOS App Development
      • Flutter
      • React Native
    • Node Js
    • React-js
    • WordPress
    • Laravel
  • Portfolio
  • Blog
  • Career
  • Contact Us
  • zluck instagram zluck instagram zluck linkedin zluck linkedin zluck twitter zluck twitter zluck skype zluck skype zluck github zluck github
zluck instagram zluck instagram zluck linkedin zluck linkedin zluck twitter zluck twitter zluck skype zluck skype zluck github zluck github
Web Development

Javascript OOP concepts

January 25, 2023 — 2 min read

Divyesh kakrecha

Hardik Prajapati

Sr. WordPress Developer
Blog detail banner image

In JavaScript, object-oriented programming (OOP) is a programming paradigm that uses objects and their interactions to design applications and computer programs. The main concepts of OOP in JavaScript are:

  • Objects: An object is a collection of properties (variables) and methods (functions) that represent a real-world entity or concept. Objects can be created using object literals, constructors, or classes (in ECMAScript 6 and later versions).
     
    var emp = new Object();  
    emp.id = 101;  
    emp.name = "xyz";  
    emp.salary = 50000;  
    document.write(emp.id+" "+emp.name+" "+emp.salary);   
    

  • Properties: Objects have properties, which are variables that store data. Properties can be accessed using the dot notation (object.property) or the square bracket notation (object[“property”]).

    const person = {
      fname:" John",
      lname:" Doe",
      age: 25
    };
    for (let x in person) {
      txt += person[x];
    }
    

  • Methods: Objects have methods, which are functions that perform actions on the object’s properties. Methods can be invoked using the dot notation (object.method()) or the square bracket notation (object”method”).
     
    // creating an object
    let student = { };
    
    // adding a property
    student.name = 'John';
    
    // adding a method
    student.greet = function() {
        console.log('hello');
    }
    
    // accessing a method
    student.greet(); // hello
    

  • Encapsulation: Encapsulation is the practice of keeping the object’s internal state and behavior hidden from the outside world, and exposing only a public interface for interacting with the object. This allows for greater control over the object’s behavior and can help prevent unintended changes to the object’s state.
     
    class Student {  
        constructor() {  
           var name;  
           var marks;  
        }  
        getName() {  
            return this.name;  
        }  
        setName(name) {  
            this.name=name;  
        }   
        getMarks() {  
            return this.marks;  
        }  
        setMarks(marks) {  
            this.marks=marks;  
        }  
    }  
    var stud=new Student();  
    stud.setName("John");  
    stud.setMarks(80);  
    document.writeln(stud.getName()+" "+stud.getMarks()); 
    

  • Inheritance: Inheritance is the mechanism by which one object can inherit the properties and methods of another object. In JavaScript, inheritance can be implemented using the prototype chain.
     
    class Car {
      constructor(brand) {
        this.carname = brand;
      }
      present() {
        return 'I have a ' + this.carname;
      }
    }
    class Model extends Car {
      constructor(brand, mod) {
        super(brand);
        this.model = mod;
      }
      show() {
        return this.present() + ', it is a ' + this.model;
      }
    }
    let myCar = new Model("Ford", "Mustang");
    document.getElementById("demo").innerHTML = myCar.show();
    

  • Polymorphism: Polymorphism is the ability of an object to take multiple forms. In JavaScript, polymorphism can be achieved by using the same method or property name in different objects, and having each one implement the behavior in a unique way.
     
    class firstClass {
        add() {
            console.log("First Method")
        }
    }
    class secondClass extends firstClass {
        add() {
            console.log(30 + 40);
        }
    }
    class thirdClass extends secondClass {
        add() {
            console.log("Last Method")
        }
    }
    var ob = new firstClass();
    var ob2 = new secondClass();
    var ob3 = new thirdClass();
    ob.add();
    ob2.add();
    ob3.add();
    

  • Class: ECMAScript 6 and later versions of javascript introduced classes, this is a blueprint for creating objects (a specific data structure), defining initial values for state (member variables or properties), and executing behavior (member functions or methods).
     
    class Car {
      constructor(name, year) {
        this.name = name;
        this.year = year;
      }
      age() {
        let date = new Date();
        return date.getFullYear() - this.year;
      }
    }
    let myCar = new Car("Ford", 2014);
    document.getElementById("demo").innerHTML =
    "My car is " + myCar.age() + " years old.";
    

Conclusion:

Overall, the concepts of OOP in JavaScript are similar to those in other programming languages and provide a powerful way to organize and structure code, making it more readable, reusable, and maintainable.

You Might Also Like:

blog img
user img
Hardik Prajapati

February 14, 2023

Web Development

How Much Does It Cost to Outsource Website Development?

When it comes to developing a website, there are a few options to consider. One of the most popular options is to outsource website development to a third-party company. This can be an attractive option for businesses of all sizes, as it allows them to get a high-quality website without having to invest in a […]

blog img
user img
Yash Dudhat

January 31, 2023

Web Development

Best websites to help in content marketing journey

Here are some popular websites that can help you with your content marketing journey. These websites offer a wealth of information, resources, and tools to help you with your content marketing efforts. It is always a good idea to keep learning and staying up to date with the latest developments in the field.

blog img
user img
Yash Dudhat

January 23, 2023

Web Development

10 Awesome Website Design Ideas You Should Experiment in 2023

Experimentation is extremely necessary for brands, and the most experimental area for brands is website design. Updating and upgrading and taking it up a notch is the way of surviving the cutthroat competitive world. Thus, here are the 10 awesome website design ideas that you should experiment with in 2023 for your brand.

View All
zluck

Zluck is an international IT firm that specializes in all types of web, mobile, and digital media solutions.

India

India

+91 97262 50544

zluck usa branch

USA

+1 (760) 904-3076

zluck instagram zluck instagram zluck linkedin zluck linkedin zluck twitter zluck twitter zluck skype zluck skype zluck mail zluck mail

Services

  • Native Mobile Apps
  • Hybrid App Development
  • Web Development
  • Website Design
  • UI/UX Design
  • Outsourcing
  • Quality Assurance
  • Salesforce Consulting

Technologies

  • Android App Development
  • iOS App Development
  • Flutter
  • React Native
  • Node Js
  • React-js
  • WordPress
  • Laravel

About

  • Zluck Solutions
  • Our Great Works!
  • Our Special Insights
  • Explore Careers

Services

  • Native Mobile Apps
  • Hybrid App Development
  • Web Development
  • Website Design
  • UI/UX Design
  • Outsourcing
  • Quality Assurance
  • Salesforce Consulting

Technologies

  • Android App Development
  • iOS App Development
  • Flutter
  • React Native
  • Node Js
  • React-js
  • WordPress
  • Laravel

About

  • Zluck Solutions
  • Our Great Works!
  • Our Special Insights
  • Explore Careers

Get a Free Quote!

Make your statement on the web!

Get a Free Quote

© Zluck Solutions. All rights reserved

  • Contact Us
  • Privacy Policy