loading...

Introduction to OOP in Javascript

ndiecodes profile image Ndifreke Friday Originally published at ndiecodes.com Updated on ・3 min read

What is this OOP thingy.

"Object-oriented programming (OOP) is a programming language model organized around objects rather than "actions" and data rather than logic" - Margeret Rouse.

To better understand let's have a look at Person as an Object, what attributes can a person have? legs, hands, head etc; these are the properties of the Person. Okay so what can a person do, run, walk, crawl, talk, sit, stand etc; these are methods of the Person object. Notice that I keep using capital "P" when I refer to the Person object, well that's how class names are written.

The basic idea of OOP is that we use objects to model real world things that we want to represent inside our programs - developer.mozilla.org

let's see some code examples shall we;

Defining Classes

We define classes using the class keyword and name ("Person"). Properties are written in the constructor method. The this keyword assigns properties to the class, this here refers to an instance of the class, think of this as a pronoun if class was a noun.

//class declaration

class Person {
     constructor() {
        this.name = "Isaac";
         this.age = 21;
     }
}

let person = new Person();

console.log(person.name); // logs - Isaac


This looks fine, but what if we want users of our programme to enter their name and age, just what if, then we have to add parameters to our constructor method. Parameters are placeholders use in functions to accept arguments( what are arguments again? just values pal). code below:

class Person {
     constructor(name, age) {
        this.name = name;
         this.age = age;
     }
}

let person = new Person("Isaac", 23);

let person1 = new Person("Bob", 28);

console.log(person.name); // logs - Isaac
console.log(person1.name);// logs - Bob

Class Methods

That was cool, now let's look at methods (getters, setters etc), they are not scary at all, let's look at an example:

class Person {
    constructor(name, age) {
       this.name = name;
       this.age = age;
    }

   // setter
   setName(name) {
       this.name = name;
   }

   //getter
   bio() {
       return this.description();
   }

   //some method with a lil logic
   description(){
       return this.name + " is " + this.age + "years old.";
   }

}

let person = new Person("Isaac", 23);

person.setName("Joy");

console.log(person.bio()); // logs -  Joy is 23years old.

I told you they were not scary, getters just get property values while setters change property values
and I used this opportunity to show you you can return another method with another, note that we can simply do return this.name + " is " + this.age + "years old."; in our bio() method.

Inheritance

Now we have a nice Person class that describes a Person,but as we go down our programme we may have other classes like Boss, Father, Mother, Worker etc. All this class will have same properties of the Person class and more. Why write same codes over and over again when you can use inheritance.

Here, a Father inherits properties/methods of Person.

 //Parent class
class Person {
    constructor(name, age) {
       this.name = name;
       this.age = age;
    }
   setName(name) {
       this.name = name;
   }
   bio() {
       return this.description();
   }
   description(){
       return this.name + " is " + this.age + "years old.";
   }

}

//child class
class Father extends Person {

    bio(){
        return super.bio();
    }
}

var father = new Father("Isaac", 34);

console.log(father.name) //logs - Isaac
console.log(father.bio()); //logs - Isaac is 34years old.

We used extends to allow Father access to properties/methods of Person.
Noticed the super used to return bio()?

We use super to access methods of parent-class("Person").

Conclusion

We covered class definition, properties, methods and inheritance, if you need more information,mozilla is always there to help;

I will be waiting for your awesome contributions down in the comment section.

Thanks for taking your time to read till the end, I appreciate, Bye.

Discussion

pic
Editor guide
Collapse
st2rseeker profile image
Edward Goikhman

I would suggest changing the inheritance example to a proper is-a relationship to illustrate the point - I assume many OOP-newbies will find this article, so better not confuse them :)

There is no sense in Person extending Organization (essentially being one).

Collapse
ndiecodes profile image
Ndifreke Friday Author

On it......tanx for the response

Collapse
copy_pasta_chef profile image
Essien

Thanks for the write-up Nddy.

In your third example, was the reason you chose to call description() in bio() just to show us that you can call class methods in other methods of the same class or was there another reason?

Also, I think you have a typo here: "I told you they were not scary, getters get's property value and setters changes our changes property value."

Thanks.

Collapse
ndiecodes profile image
Ndifreke Friday Author

no other reason

thanks for noticing d typo.

Collapse
linaran profile image
Deni

Bad example on inheritance. Inheritance describes an IS-A relationship. Obviously a person is not an organization and such an inheritance doesn't make sense. Also "this" refers to the instance of the class not the class itself. Second description implies that changes on this would influence all instances of some class which is not the case.

Collapse
ndiecodes profile image
Ndifreke Friday Author

you are absolutely right...
why I do agree I did use a bad example while trying to stick to the storyline,
I tried to keep it as simple as possible as I did not expect a newbie to understand instances

Collapse
linaran profile image
Deni

Keeping instructions is nice but they need to be precise otherwise a newbie could conclude that "this" is some kind of a static variable and that could make learning difficult down the road.

Just edit the "this" part, overall the article is fine.

Collapse
ndiecodes profile image
Ndifreke Friday Author

thanks for contributing.

Collapse
ndiecodes profile image
Ndifreke Friday Author

It sure is a bad example none-the-less, I am working on changing it and still keeping it as simple as possible

Collapse
imsop profile image
Rowan Collins

Wait, now every Person is a Father, but not every Father is a Person? I think maybe you should spend more time understanding inheritance yourself before trying to explain it to others.

Collapse
ndiecodes profile image
Ndifreke Friday Author

A person is a Father
A Father is a person

In this case it goes both ways

I am not perfect... I get that!

you see something that doesn't feel right you let me know.

Collapse
imsop profile image
Rowan Collins

Not every Person is a Father, and that's what inheritance represents. If class B inherits from class A, it means that every instance of class B has the abilities of class A, and anywhere that expects an A can be given a B instead.

This is probably easier to understand if we add a third class to the example: Mother. Intuitively, a Mother is a Person, but not a Father; and a Father is not a Mother either. So code that expects a Father and is given a Mother won't work; but code that expects a Person can be given a Father or a Mother. So, we would write "class Father extends Person", and "class Mother extends Person".

Thread Thread
ndiecodes profile image
Ndifreke Friday Author

Thanks man... I figured that out from your first response

I think this article has helped me more than it will help any reader and I made some changes which you can check out too

I'm grateful.

Collapse
lancecontreras profile image
Lance Contreras

I like the way you wrote it, you made it look really easy.

Collapse
ndiecodes profile image
Ndifreke Friday Author

thanks Lance, I'm glad you liked it

Collapse
vicemond profile image
Vic Emond

You have an extra "class Person {" in there...

Collapse
ndiecodes profile image
Ndifreke Friday Author

can you be more specific pls

Collapse
ndiecodes profile image
Ndifreke Friday Author

Seen it... tankx

Collapse
aminspeaks profile image
Amin Mohamed Ajani

Classes in JS is less syntactical sugar and more syntactical salt.

Collapse
ndiecodes profile image
Collapse
harveylewis profile image
Harvey Lewis

In the first example, I believe the code at the bottom should be
'Console.log(citizen.name)'
Rather than
'Console.log(a.name)'
no?

Collapse
ndiecodes profile image
Ndifreke Friday Author

Yes you are right... I kinda changed to citize at a late hour.... forgot that one

Editing it now... tanx