Get acquainted with object-oriented programming in Javascript. After learning some built-in Javascript objects like Math() and Date(), we will learn how to create your own object. In the era of modern programming, object-oriented programming is common. If you hear OOP, we always remember the Java programming. Because Java purely uses OOP as the programming language. You are lucky because Javascript doesn’t force programmers to use the pure OOP concepts (although most frameworks like Angular and React have applied the concept of object-oriented programming).
Although not required to use OOP to create web applications, I think you are obliged to understand the OOP concept, because many Javascript libraries are built using OOP concepts so that it is easier for you to study the Javascript library. Interested in learning OOP Javascript? Check out this article to complete
Table of Contents
What are Objects in Javascript?
The object is a variable that stores the value (property) and function (method).
For example, a motorcycle object. How do we model this motorcycle in the program code?
It can be like this:
1 | var motorbike = "Trail"; |
But the motorbike variable just stores the vehicle name. Therefore, we must use objects to keep the motorbike all component.
Objects in Javascript are made with many keys and values wrapped in curly brackets.
1 2 3 4 5 6 7 8 9 10 11 | var motorbike = { color : "red", type : "trail", engineStat : "off", start : function(){ this.engineStat = "on" }, stop : function(){ this.engineStat = "off" } } |
After successfully creating a motorbike object, how to access it?
1 2 3 4 | motorbike.color; motorbike.type; motorbike.start(); motorbike.stop(); |
To access the property, we only need to use the “objectName.propertyName“. To call the method, we must use parentheses such as the use of Javascript functions in general (Maybe you need to read the tutorial Javascript function here).
Keyword this
This keyword is used to access properties and methods from within a method in an object.
Creating a Javascript object just like the above. But what if we need to make many motorbike objects with different colors and types? Of course, we have to declare objects one by one like the following example.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | var motorRed = { color : "red", type : "trail", engineStat : "off", start : function(){ this.engineStat = "on" } stop : function(){ this.engineStat = "off" } } var motorYellow = { color : "yellow", type : "trail", engineStat : "off", start : function(){ this.engineStat = "on" } stop : function(){ this.engineStat = "off" } } //.... etc |
But, Will it be effective if you create 20 different object motorbikes with different colors?
That’s why we need instance class to declare objects dynamically. And this is where the function of pattern Object Oriented Programming is required.
Object-Oriented Programming in Javascript
In object-oriented programming, we create objects by creating instances of a class.
Before creating an object, we need prints to create an object that we call a class. Just like making a motorcycle, we need a blueprint to make vehicles.
Related article : Concept Object Oriented Programming PHP for beginners
Within the class there are several important attributes:
- Constructor
- Property
- Method
- Getter and Setter
- Inheritance
We will study it one by one:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | class Motorbike { engineStat ; color ; type ; constructor(type,color,stat) { this.color = color this.type = type this.engineStat = stat } engineStart() { this.engineStat = 'on' console.log('engine start') } engingeStop () { this.engineStat = 'off' console.log('engine start') } get color(){ console.log(this.color) } set color(col){ this.color = col } get type(){ console.log(this.type) } set type(type){ this.type = type; } static checkEngine(mbike) { if (mbike.engineStat === 'on') { console.log('Engine On') } else { console.log('Engine off') } } } var trail = new Motorbike("trail","red","off"); |
Constructor
A constructor is a function that will run first time when an object created.
Like the example code above when creating a new object var trail = new Motorbike (“trail”, “red”, “off”), then the constructor method is immediately executed, which contains the trail, red and off parameters into the property this.type, this.color and this.stat.
We can ignore the constructor by creating a new object without adding any parameters. However, all properties that have not been set value will be an undefined value.
Property
Property is data that is stored in an object (We call it a variable). In the example above, this.type and this.color can be accessed in any method that is inside the object class.
Method
Method is a function or command that is in an object to perform a certain task. For example the motorbike class above, we will use the engineStart method.
1 2 | var trail = new Motorbike("trail","red","off"); trail.engineStart() |
Static Method
The static method is a function that can be executed without creating an instance of the class. To run it simply use className.methodName().
1 2 3 | var trail = new Motorbike("trail","red","off"); trail.engineStart() Motorbike.isEngineOn(trail ) |
Getter and Setter.
Just like in Java, Javascript also has getter and setter.
Getter
By using getter, we will not access raw data directly from the property we want to access, but through a getter method that will retrieve and process the data before returning.
Setter
The setter is the opposite of getter. The setter used to assign values to the property.
To declare a getter method, we simply add the keyword get before the method name as the example
1 2 3 | get type(){ console.log(this.type) } |
Same with the getter, to make setter just add the keyword set before the method name as follows
1 2 3 | set type(type){ this.type = type;<br> } |
Definition of Inheritance in OOP
Inheritance is an OOP concept where a class can ‘decrease‘ its properties and methods to other class. The idea of inheritance is used to avoid the code duplication.
The concept of inheritance creates a structure or ‘hierarchy’ class in the program code. The main class is called the parent class. Whereas the inherited class called as the child class.
Not all properties and methods of the parent class will be derived.
Property and method with private access rights, will not be revealed to the child class. Only properties and methods with protected and public access rights can be accessed from the child class.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | class Component{ name = ""; id = ""; set name(nm){ this.name = nm } get name(){ return this.name } set id(_id){ this.name = _id } get name(){ return this.id } } class textbox extends Component { textbox; constructor(name,id){ this.name = name; this.id = id; } get textbox(){ console.log("<input type='textbox' name='"+this.name+"' id='"+this.id+"'>") } } |
Conclusion
Learning Object-Oriented Programming makes our application code more structured. Also, OOP prevents duplication of code and speeds up the creation of web applications.
So is my tutorial about object-oriented programming in Javascript. Get the full Javascript tutorial here, see you next tutorial
Reference : https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS
Leave a Reply