• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
seegatesite header

Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

  • TOOLS
    • Bootstrap Navbar Online Generator
    • Customize Sidebar Menu Bootstrap 3
    • Bootstrap Demo
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • Q&A
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
  • REACT
🏠 » Javascript » Smoothly Learning Object Oriented Programming in Javascript

Smoothly Learning Object Oriented Programming in Javascript

By Sigit Prasetya Nugroho ∙ July 21, 2019 ∙ Javascript ∙ Leave a Comment

Share : TwitterFacebookTelegramWhatsapp

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

Complete Guides Object Oriented Programming Javascript Min

 

Table of Contents

  • 1 What are Objects in Javascript?
  • 2 Object-Oriented Programming in Javascript
    • 2.1 Constructor
    • 2.2 Property
    • 2.3 Method
    • 2.4 Static Method
    • 2.5 Getter and Setter.
    • 2.6 Definition of Inheritance in OOP
  • 3 Conclusion

What are Objects in Javascript?

The object is a variable that stores the value (property) and function (method).

Object Class Javascript Min

For example, a motorcycle object. How do we model this motorcycle in the program code?

Related Articles :

  • Basic Class in Object Oriented Programming PHP

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();

Javascript Object Tutorial Beginners.html Min

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

Another Javascript Related Post :

  • Adept Using Datatables Plugin In 10 Minutes For Beginners (Tutorial)
  • The Using Of Reactstrap And React-Table, Suitable For Beginners
  • Tutorial Create Simple Block UI Using React JS
  • How To Implement Login Page And Protected Route ReactJS
  • Complete Tutorial React Router Dom For Beginners (Easy-To-Understand)
  • The Right Way Understanding React Lifecycle For Beginners

Avatar for Sigit Prasetya Nugroho

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Welcome to my Home,

Avatar for Sigit Prasetya NugrohoThis site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.



Popular Articles

Checked checkbox AdminLTE Bootstrap in Jquery

November 4, 2014 By Sigit Prasetya Nugroho 7 Comments

Simple create date format validation with jqueryUI

December 21, 2014 By Sigit Prasetya Nugroho Leave a Comment

Create Simple Progress Bar for Fake Online Generator with Jquery

January 10, 2015 By Sigit Prasetya Nugroho Leave a Comment

22+ Coolest Free Jquery Plugin For Premium Theme

October 3, 2015 By Sigit Prasetya Nugroho Leave a Comment

Easy Build Your Anti Copy Paste Plugin

October 6, 2015 By Sigit Prasetya Nugroho Leave a Comment

Popular Tags

adminlte (15) adsense (13) adsense tips (4) affiliate amazon (13) amazon (12) Android (8) angular (16) angular 4 (12) angular 5 (4) asin grabber (3) Bootstrap (27) codeigniter (5) create wordpress theme (5) crud (8) css (6) free wordpress theme (7) google adsense (4) imacros (4) increase traffic (6) jquery (34) laravel (10) laravel 5 (5) learn android (5) modal dialog (5) mysql (6) nodeJs (4) optimize seo (4) pdo (6) php (30) plugin (53) pos (7) Publisher Tips (5) react (3) Reactjs (7) SEO (37) theme (17) tutorial angular (5) tutorial angular 4 (6) tutorial javascript (10) tutorial javascript beginners (4) twitter (3) widget (3) wordpress (18) wordpress plugin (13) XMLRPC (5)




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2021 Seegatesite.com