Creating classes and objects
Class and Object in JavaScript Programming (OOPS) is an old object-oriented programming fundamental programming concept. Class features in JavaScript program is a better process to create a new class object instance, and class object in JavaScript is an instance features of the class. Which is helpful in creating and managing class data and class methods.
Creating a Class in JavaScript Programming.
In JavaScript programming, the class is declared or defined using the built-in class keyword. In JavaScript, the class is used as an object instance.
Features of a class.
- Class properties – The data related to an object in a JavaScript program are the properties of the class.
- Class methods – The functions related to an object created in a JavaScript program, which define the behavior of that class.
- Class constructor – Class constructor is a special class method, which is called in the program while creating an instance of an existing class or a new class object.
Basic syntax of a class.
class ClassName {
constructor(class parameters) {
// let Initialize class object properties
}
// let Define class methods
methodName() {
// set class Method logic
}
}
Example of creating a class and object in JavaScript.
How to define a class in JavaScript.
So, let’s create a class in JavaScript program. Which has a constructor to initialize the properties of that class and a basic method to display the detailed description of the employee.
class employee {
// let create some Constructor to initialize class properties
constructor(emp_name, emp_age) {
this.emp_name = emp_name;
this.emp_age = emp_age;
}
// let create some Method to display employee class member details
display() {
console.log(`Welcome, employee name is ${this.emp_name} and age is ${this.emp_age} year old`);
}
}
Explanation of Class Data Type.
Here in the current class class constructor(emp_name, emp_age): is a user defined constructor method applied when an instance of Employee class is created. It inputs the class properties employee name and employee age as a parameter and initializes the properties related to the class.
Here display(): is a class method which displays the employee name and employee age in the Employee class.
Create an object from the class in JavaScript program.
So now let us create an object or instance of the employee class.
let employee1 = new employee(“Siddhi”, 23);
employee1.display(); // Result is – Welcome, employee name is Siddhi and age is 23 year old
Explanation of Create an object from the class.
In this class program new employee(“Siddhi”, 23): Creates a new instance object of the employee class, initializing it with the employee name “Siddhi” and employee age 23 years old.
employee1.display(): Calls the display() method on the employee1 object.
Creating a class with multiple methods in a JavaScript program.
A class in a JavaScript program can have multiple class methods to define different class object instance behaviors for objects created from it.
class employee {
// let create a desire Constructor to initialize class properties
constructor(name, age, id) {
this.name = name;
this.age = age;
this.id = id;
}
// let create a Method to start the car
info() {
console.log(`${this.name} ${this.age} working employee information.`);
}
// let create Method to terminate employee information
terminate() {
console.log(`${this.name} ${this.age} terminated employee detail.`);
}
}
let employeedetail = new employee(“Siddhi”, “Harry”, 2020);
employeedetail.info(); // Result – Siddhi Harry working employee information.
employeedetail.terminate(); // Result – Siddhi Harry terminated employee detail.
Explanation of multiple methods in a JavaScript.
In the above class program, info() and terminate() class methods are defined to display and terminate employee information.
The employeedetail object is an instance of the Employee class, and here we invoke the methods of the Employee class using dot notation.
Getters and Setters in a Class in JavaScript.
Class getters and setters are special class methods in JavaScript, they are used to access the properties of a class object and update or modify them.
Features of getters and setters in a class.
- Class getter – Class getter returns the property value of a class.
- Class setter – Class setter updates or modifies the existing class property value set.
Javascript programming examples with getter and setter.
class Rectangle {
constructor(rect_width, rect_height) {
this.rect_width = rect_width;
this.rect_height = rect_height;
}
// let create a class Getter properties for class area
get rect_area() {
return this.rect_width * this.rect_height;
}
// let define Setter for rectangle width
set width(values) {
if (values > 0) {
this._rect_width = values;
} else {
console.log(“Width must be positive.”);
}
}
// let create or modify Getter properties for class width
get width() {
return this._rect_width;
}
}
let rect = new Rectangle(14, 30);
console.log(rect.rect_area); // Result – 420
rect.width = 20; // let Set modify or update a new width of rectangle class
console.log(rect.width); // Result – 20
console.log(rect.rect_area); // Result – 420
Getters and Setters and Explanation.
- get area() – Here the getter method gets the total area of the rectangle based on its width and height.
- set width(values) – While the setter method validates the width to make sure it is a positive value before modifying the internal property _width.
Inheritance Features in JavaScript.
OOPS concepts in JavaScript programming allow programmers to inherit class properties and class methods from other classes within classes. This is known as class properties inheritance method in programming. Class inheritance features enable JavaScript programmers to create subclasses or child classes within an existing class, which extends the inheritance capability of the root or parent class.
Syntax of Inheritance Class.
class subClass extends ParentClass {
constructor(class parameters) {
super(parameters); // it used to Call the parent class constructor properties
// here it Initialize a child class properties
}
// let Define a child class methods
}
Example of inheritance program in JavaScript.
class course {
constructor(course_name) {
this.course_name = course_name;
}
coursedetail() {
console.log(`${this.course_name} Select a course.`);
}
}
class selection extends course {
constructor(course_name, select) {
super(course_name); // here it use to Call the parent class constructor properties
this.select = select;
}
medium() {
console.log(`${this.course_name} english.`);
}
displaycourse() {
console.log(`${this.course_name} a popular ${this.select}.`);
}
}
let course1 = new selection(“javascript”, “web development programming language”);
course1.coursedetail(); // Result – javascript Select a course.
course1.displaycourse(); // Result – javascript a popular web development programming language.
Expansion of Inheritance Class.
Here the inherited course is a parent or root class that has a user defined medium() class method.
course1 extends the course class, inherits the medium() method, and adds a new method displaycourse().
super(course_name): Here a super() function is used to call the constructor of the parent class (course) and initialize the course_name property.
Javascript Class Static Methods.
In JavaScript programming static methods are defined in the class itself, programmer cannot define them on the instance of the class. Static methods in Javascript are useful when programmer wants to apply an operation in the program which is not completely dependent on instance properties in the created class.
Example of static method in Javascript.
class numericaltesting {
static total(p, q) {
return p + q;
}
static product(p, q) {
return p * q;
}
}
console.log(numericaltesting.total(4, 8)); // Result – 12
console.log(numericaltesting.product(3, 7)); // Result – 21
Explanation of Javascript Class Static Methods.
In static method program total() and product() are declared static methods for numericaltesting class.
So that you can call static method on class directly in class program without creating any instance.
Summary of class and inheritance concepts in JavaScript.
- JavaScript Class – A feature of class instance creation in JavaScript programs containing objects and objects.
- Class Constructor – This is a special method in the declared class, class constructor is used to create the parameter element of the class.
- Class Method – This is a class feature that defines the behaviour of any class object.
- Getter and Setter Method – Special methods to declare default elements of class element properties and update or modify them when needed.
- Inheritance Class – This is the process of creating a new subclass class based on any root or super static class, which inherits the index and inheritance of the root class to the subclass.
- Static Class Method – These are the program methods in a class, which are called on the root class only and not on the principal of the existing class.
