(Supplementary content) JavaScript OOP - Classes, Methods and Objects Tutorial
Repository
https://github.com/igormuba/JavaScript-Basic-OOP-Class
What Will I Learn?
- 3 ways of creating objects
- Constructor
- Getter and Setter
Requirements
- Basic procedural programming concepts understanding
- Text editor
- Browser
Difficulty
- Basic
Tutorial Contents
Again, as I was writing the next turoial for the Steem API programming class I felt like, as the class is made to be beginner friendly, I needed to psot more supplementary content, so I wrote this tutorial to make you understand the concepts of getters, setters and objects, I might need another supplementary tutorial about JSON, but to understand JSON I believe you should understand objects, and only then follow up with the rest of the Steem API classes
Creating the index to "host" the script
We need to have an html file just so that the browser can read the script code as script, else it will just print the text. I want to, soon, start teaching you how to use node.js (please, search about it), so we will need just the pure JavaScript
<!DOCTYPE html>
<html>
<head>
<script src="myscript.js"></script>
</head>
<body>
</body>
</html>
Create the javascript file
The javascript file obviously should have the same name your gave in the <script src="myscript.js"></script>
in this case myscript.js
The Triforce - 3 common ways of creating objects
JavaScript is a very flexible language, while other languages have very strict rules on how to do things, on JavaScript you are free (this freedom comes with costs though, one is that the community of developers have a hard time setting universal development patterns)
First way
let myFirstObject = new Object();
myFirstObject.greet = "Hello, I am an the first object";
Here, on the first line, we are literally telling our computer to create a space on the momery for the myFirstObject
variable and create an Object for it.
On the second line we are giving it a variable named greet
with the greeting string.
This is the same as creating a variable like
var greet = "Hello, I am an the first object";
As I have said, JavaScript is very flexible
You can log it on the console to see that it works
console.log (myFirstObject.greet);
Second way
let mySecondObject = {greet: "Hi, I am the second object!"};
This is called a literal object and is very similar to what we have seen on the main Steem API development classes.
You can use the console log again to see that it works the exact same way
console.log (mySecondObject.greet);
Third way
The third way is the foundation of OOP (Object Oriented Programming), here we will, before we create an object, create a class.
class MyThirdObject(){
}
The class is like a blueprint of how to create objects. Inside the blueprint we will add something called "constructor", which is what literally construct the blueprint into a "tangible" object.
When we create an object the code inside the constructor is automatically built, so there is where we will put our greeting.
class MyThirdObject {
constructor(){
this.greet = "And I am the third";
}
}
Now we build the object
let myThirdObject = new MyThirdObject();
And see that it has the exact same result as before
console.log(myThirdObject.greet);
Why is the third way important if it has much more code for the same thing?
Aha! That is where I wanted to get with you. If the other ways of creating object have the same result with less code, why use the third way?
Because we have more flexibility with it. With classes we can use getters and setters, much like the constructor, they are methods inside the class and add lots of functionalities, keep reading and you will understand.
Constructor arguments
First, let us delete all the other objects to focus only on the third
Now, as the class is the blueprint, it allows us to create multiple objects with different attributes, but to use this we need to change the constructor to receive an argument when the object is created.
class MyThirdObject {
constructor(objectPosition){
this.greet = `Hello, I am the ${objectPosition} object`;
}
}
Here we pass the objectPosition
argument to the constructor.
In the past Steem API development class we have used the trick
`some string ${variable} some string`
if you have read the last tutorial, what this does is change the variable on the string. So now we can create many objects in different positions.
Getter
For good practice, let us use a getter, JavaScript has a dedicated word for it
get greeting(){
return this.greet;
}
To call the getter you just need to call it as if it were a normal attribute!
console.log(myThirdObject.greeting);
So the code looks slightly different
But the output for the "third" is still the same, I mean, we have removed the first and second, but that is exactly what we expected
But we are not the third anymore!
You are completely right! Here is where the setter method comes to use! It works just like setting an attribute, but it is a method, which gives us flexibility! A lot!
set greeting(objectPosition){
this.greet = `Actually, I am the ${objectPosition} object`;
}
This sets the greet just like the constructor, but it called after the object is instanciated, not when it is built
To call the setter just do as if you are setting an attribute, but with the advantage of the flexibility of manipulating the data!!!
myThirdObject.greeting = "first";
Now if you console log
console.log(myThirdObject.greeting);
The code looks like
And the output
Now you see, this third method is more extense, but pays off in flexibility
Proof of Work Done
index.html
https://github.com/igormuba/JavaScript-Basic-OOP-Class/blob/master/index.html
myscript.js
https://github.com/igormuba/JavaScript-Basic-OOP-Class/blob/master/myscript.js
myscript.js with thegetter
https://github.com/igormuba/JavaScript-Basic-OOP-Class/blob/methods/myscript.js
myscript.js with the getter and setter
https://github.com/igormuba/JavaScript-Basic-OOP-Class/blob/ChangeObjectPosition/myscript.js
VOTE @igormuba FOR WITNESS!
To vote for me, simply use the SteemConnect link below
https://steemconnect.com/sign/account-witness-vote?witness=igormuba&approve=1
or go to https://steemit.com/~witnesses
(note, it is /~witnesses, not /witness)
Scroll all the way down to "If you would like to vote for a witness outside of the top 100, enter the account name below to cast a vote."
type igormuba and click vote
Thank you for your contribution @igormuba.
We've reviewed your tutorial and suggested the points below:
The subject of creating objects in javascript is very interesting and very useful for less experienced users to understand the concept.
In proof of your work you don't need to enter the address of each file. Just enter the project address https://github.com/igormuba/JavaScript-Basic-OOP-Class
Good work on developing this tutorial. It is explained in a way that less experienced users understand perfectly what an object is in javascript.
Continuation of a good job and we are waiting for more tutorials from you.
Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.
To view those questions and the relevant answers related to your post, click here.
Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]
Thank you again @portugalcoin your feedbacks have helped me a lot to improve, you do a wonderful job and I am very grateful for the tips on how to do a better service
Thank you for your review, @portugalcoin! Keep up the good work!
Congratulations @igormuba! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :
Click here to view your Board of Honor
If you no longer want to receive notifications, reply to this comment with the word
STOP
To support your work, I also upvoted your post!
Do not miss the last post from @steemitboard:
Hi, @igormuba!
You just got a 0.28% upvote from SteemPlus!
To get higher upvotes, earn more SteemPlus Points (SPP). On your Steemit wallet, check your SPP balance and click on "How to earn SPP?" to find out all the ways to earn.
If you're not using SteemPlus yet, please check our last posts in here to see the many ways in which SteemPlus can improve your Steem experience on Steemit and Busy.
Hey, @igormuba!
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!
Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).
Want to chat? Join us on Discord https://discord.gg/h52nFrV.
Vote for Utopian Witness!