(Supplementary content) JavaScript OOP - Classes, Methods and Objects Tutorial

in #utopian-io5 years ago

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

Sort:  

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) :

You made more than 700 upvotes. Your next target is to reach 800 upvotes.

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:

Saint Nicholas challenge for good boys and girls

Support SteemitBoard's project! Vote for its witness and get one more award!

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!

Coin Marketplace

STEEM 0.36
TRX 0.12
JST 0.040
BTC 70846.59
ETH 3567.69
USDT 1.00
SBD 4.79