What is Objects And Classes OOPs Concept of JavaScript.

Posted By :Kajal Singh |29th March 2019

What is Objects And Classes(Object-Oriented Programming Concept) of JavaScript?

 

As We Know that JavaScript is widely used in Web Development, So in this Blog, we would explore two of the OOPs(object-oriented Programming) Concepts which supported by JavaScript. Some of the commonly asked questions in JavaScript on OOPS are as follow:- How To Implement Object Oriented Programming in JavaScript? How they differ from other languages? Can you implement Inheritance in JavaScript and so on…”

 

There are some features or mechanisms which makes a Language Object-Oriented:-
1. Object:- It is a unique entity which contains property and methods. For Example:- The " Car" is a real-life Object which has some characteristics like color, type, model, etc and performs certain action like drive. In Object Oriented Programming we called characteristics of an Object is properties and actions are called methods. The object is an instance of a class. Objects are used in everywhere in javascript whether it is a function, arrays, and string.

Example:- An Object can be created in two ways in JavaScript are as follow:-

1. Object Literal:-

 // Defining Object  
var employee = {   
    // Propertise 
    empFirstName: "kajal", 
    empLastName: "singh", 
    // Methods 
    getFullName: function () { 
        return "employee name is " + this.empFirstName + " " + this.empLastName + "."; 
    }
} 
console.log(person.getFullName()); 

Output:- employee name is Kajal Singh.

2. Object Constructor:-

// construtor to initialize variables 
function employee(first, last) { 
    this.employeeFirstName = first; 
    this.employeeLastName = last; 
} 
  
// with the prototype to define methods 
emplyee.prototype.getDetails = function () { 
    return "Employee name is " + this.employeeFirstName + " " + this.employeeLastName + "."; 
} 
  
  
var employeeName = new employee("Kajal","Singh"); 
console.log(employeeName.empFirstName); 
console.log(employeeName.getDetails()); 

Output:
kajal
Employee name is Kajal Singh.

 

2. Classes:- The Classes are the blueprint of an Object. A class can have many Object because the class is a template while Object is instances of the class or the concrete implementation. Before we move further into implementation, we should know unlike other Object Oriented Language there are no classes in JavaScript we have only Object. 

Example:- Let's use ES6 classes then we will use the traditional way of defining Object and simulate them as classes.

// Define class using ES6 
class employee { 
    // Defining connstructor  
    // to initialize the property 
    
constructor(empFullName, employeeId) { 
        this.empFullName = empFullName; 
        this.employeeId = employeeId; 
    } 
  
    // Method returns employee details 
    getEmployeeDetails() { 
        return "Employee name is" + this.empFullName + ", Employee id is " + this.employeeId + "."; 
    } 
} 
  
// Creating an Employee Object  
var empObj = new employee("kajal", "15"); 
  
// Printing the Employee Details 
console.log(empObj.getEmployeeDetails()); 

Output:- Employee name is kajal, Employee id is 15.

 

* Traditional Way:-

// Defining class in a Traditional Way. 
function employeeDetail(empFullName, employeeId) { 
    this.empFullName = empFullName; 
    this.employeeId = employeeId; 
}; 
  
employeeDetail.prototype.getDetails = function(){ 
    return "Employee name = " + this.empFullName + ", Employee id = " + this.employeeId + "."; 
} 
  
var empObj = new Employee("kajal", "15"); 
console.log(empObj.getDetails()); 

Output:
Employee name = kajal , Employee id = 15.

 

Thanks & Regards,


About Author

Kajal Singh

Kajal is very sincere and hardworking. She is positive and a good team player.

Request For Proposal

Sending message..

Ready to innovate ? Let's get in touch


Notice: Undefined index: HTTP_REFERER in /var/html/www/AI/wp-content/themes/oxides-child/functions.php on line 272

Notice: Undefined index: HTTP_REFERER in /var/html/www/AI/wp-content/themes/oxides-child/functions.php on line 272

Notice: Undefined index: HTTP_REFERER in /var/html/www/AI/wp-content/themes/oxides-child/functions.php on line 272

Notice: Undefined index: HTTP_REFERER in /var/html/www/AI/wp-content/themes/oxides-child/functions.php on line 272

Chat With Us