Learning while teaching — Class 1

Addendum

After some thoughts I realized that I introduced the concept of Class in a bad way, so I’ve made some changes into the text to better explain it. I highly recommend you to read it again ;).

To make it easier I highlighted the changes and new contents for you.

Intro

Are you setup? Good, so have a seat and let’s go!

First I would like to share my class plan.

Every week (I hope so) I’ll publish a new class, if something is posted in here means that the real class was already taught and some feedback was collected from it.

The classes will have at least one “theoretical” part and one “hands-on” part. Sometimes the difference will be so subtle that you will not even notice which one is theoretical and which one is hands-on but the idea is that you will always learn how something work and always learn how to do something.

Where I can find your stuff?

All code will be posted on my GitHub account, this first class is here. You may find some extra material in the repo, so if you have any doubt about it just e-mail me :).

How we can talk?

There are two ways to do so, one is send me an email: me@lucavgobbi.com; the other is joining the Slack group. The second one is more recommended cause as the group grows you can find more people to help you.

To Join the group send me an email to me@lucavgobbi.com and I’ll invite you to the group :).

Classes (Javascript Classes, not school classes)

What is a Class?

Many of you may know already what a Class is. But for those who don’t know I recommend taking a look in here. According to Wikipedia a Class is:

An extensible program-code-template for creating objects, providing initial values for state (member variables) and implementations of behavior (member functions or methods)

Awesome right? But, what does it mean? In other words, a Class is something that has properties and methods. For instance, “You” could be a Class. You have your weight, height, eyes color, hair color… these are your properties. So the Class “You” has properties.

And I’m pretty sure that you also know how to do some cool stuff right? You know how to walk, sleep, talk and the list goes on. These are your methods.

That said, “You” has some properties and methods and we can call You a Class. But You is very specific, do we really want something so specific? The answer (for now) is NO!

A good design would be not You, you are not a good design (just kidding). A good design would be Person. Person is more generic and thus since you are a person (I hope so) we can say that you is an Instance of Person.

We can say that an Instance of Person is a specific Person that has the same properties that every other Person and the same methods although this properties can have different values like I have my own height and you have yours but we all have height. Also we both walk (exceptions apply) and the outcome of walking is for example running a distance, but due our different height we can walk different distances.

All that said, we now have a Class called Person, this class has some properties like height, weight and also some methods like sleep and walk.

And me, you and everyone else in the world would be an Instance of Person.

If life was a programming language, we could have something like this

Person have one height and one weight. Both are numbers
A person can walk a distance and sleep for some time.
I’m a Person with 1.70m and 60kg;
You are a Person with 1.78m and 71kg;

To much verbose right? That is the why we don’t write code like this. Every programming language has its own way to describe and instantiate a Class in our case, Javascript has more than one. Well, in fact JavaScript doesn’t have Classes, although it’s an Object Oriented language Javascript uses Prototypes inheritance and everything is an Object which means that when writing a code in JavaScript you have to think a little bit different than other languages, but for now let’s call these Prototype objects as classes.

Introduced in ES6 (ECMA Script) there is a new way to define Prototypes which is very similar Class declaration in many other Object Oriented languages. Back in ES5 (The version that is widely supported) we usually use Prototypes to declare our “classes” (more about that in a future class).

We will take a look in both, but initially we will focus on Prototypes.

ES6

This is how to declare classes in ES6

After the keyword class is the name of the class. Next we have an method called constructor(), it is responsible for setting the initial state of our class during instantiation and it receive one parameter called options. You can receive how many parameters you like and use any name on them. To follow some standards, I called this parameter options and its is supposed to be an object with the initial values of a person.

If you that a closer look you will see that “use strict” is in the beginning of the method, this is required by Node.js using ES6.

Inside this special method called constructor I have some code that is responsible for setting the initial state of my class.

this.name = options.name; 
this.weight = options.weight; 
this.height = options.height;

These 3 lines of code simple copy the values on options parameter to my class instance so I can use them later.

The other methods of this class are declared right after it for example, the method walk(steps) receive one parameter called (can you guess?) steps with represents how many steps this person will walk. For now, the code just does some calculations and return a number with the result.

This is basically how you declare a Prototype (Class) on ES6.

ES5

On ES5 declaring a Prototype (Class) is very different and must sound weird if you have already used other Object Oriented Programming Language. This is called Prototype and I’ll not go into to much details, if you have interest read this article. One think that I must mention is that Prototypes are one of the main concepts of JavaScript that make it so flexible.

The first part of the code is our constructor, this constructor does exactly the same thing as the other one above, you might have noticed that the constructor it is being assigned to a variable. When using Prototype, this variable will be used to instantiate our Prototype (Class) every time we want to use it and for other declarations such as methods.

Now, since this variable personAsPrototype is an object it has a prototype property (every object in Javascript has a prototype property).

The next lines we are adding the methods to the prototype of our object, this is done by adding a new function inside the prototype of our object.

For instance:

personAsPrototype.prototype.walk = function (steps) {
    // Supose that each step can walk 1/3 of the height
    return steps * this.height / 3;
};

walk() is a function which take steps as parameter and return some calculations with it. Notice that we can access the property this.height inside the function. Like the previous example, we can access this.height because this is a class property that will be instantiated in the future.

And now what?

Ok great, we have the same class in ES5 and ES6, but now what? To finish this part of the class we’ll learn how to instantiate these Prototypes (Classes).

This is how it’s done for PersonAsClass:

And this is how it’s do for personAsPrototype:

WOW! Can you see the difference? Yes, there is no difference, it just depends the name of the Class or the variable attributed in case of using Prototype.

This should give us 4 variables, where two are instance of PersonAsClass and the others are instance of personAsPrototype.

Since both implements the same methods and have the same constructor we can instantiate and use them the same way.

Here is how to call the method, try to run them by yourself ;)

PS: about the static method? We’ll look at it later.

The end… for now

So this is it for now, at this point you are supposed to know how to create your own Prototypes (Classes) on ES5 and ES6, of course, there is a lot more to learn about it, but if at this point you can tell what a Class is (in any language) and how to create a basic Prototype (Class) in Javascript you should be good.

Try searching some projects at GitHub to see how complex Prototype (Class) are created and used.

If you have any doubts, fell free to contact me at me@lucavgobbi.com and sent me an email asking to join our Slack channel.

See you next week ;)