Demystifying OOP in Javascript
Javascript is a multi-paradigm language. This means that it supports multiple ways (or structures) of writing your javascript code.
Javascript supports two major ways of writing codes: The imperative and declarative programming paradigm.
The imperative way of programming is concerned with how and where you list out every step of the program. Object-oriented programming (OOP) falls under the imperative paradigm.
Declarative programming is more concerned with what and the output of the program. This includes functional programming.
If all this is a bit confusing, check out these articles: they talk in-depth about javascript paradigms. https://medium.com/javascript-in-plain-english/what-are-javascript-programming-paradigms-3ef0f576dfdb
https://medium.com/@zach.gollwitzer/imperative-vs-declarative-programming-procedural-functional-and-oop-b03a53ba745c
This article, however, focuses on OOP.
What is OOP?
Object-oriented programming is a computer programming model that organizes software design around data, or objects, rather than functions and logic.
There are four major building blocks of OOP, they include:
- Classes
- Attributes
- Methods
- Objects
Classes
To get started with OOP in Javascript, a class is required. The class is like a blueprint for the structure of your methods and attribute. For instance, if I want to create a virtual person. I want this person to have a name, gender, interest etc and I want this person to be able to do things like introduce themselves, greet etc. And I also want to write this program using the object-oriented method. First I have to create a class for this.
class Person{ // code goes in here}
I called my class “class”, and then named it “Person” since that class is about a person. Note that the class name starts with an uppercase letter as opposed to just lowercase for variables. Then, I put my curly braces to signify that it is a block of code.
Attributes
Attributes simply mean quality or feature, and in this case, it would mean attributes of the person class I have created.
class Person{
constructor({name, age, gender, interests}){
this.name=name
this.gender=gender
this.interests=[…interests]
}}
In my person class, I have created three attributes of this person: name, age and interests. You would notice that I have also added a constructor. A constructor helps in creating a new instance of an object. Don’t stress too much if you didn’t understand that, it’ll be clearer soon enough.
Methods
At this point, you should be familiar with objects in javascript which basically are functions stored as object properties (actions) and can be performed on objects.
Example of an inbuilt function includes: .toUpperCase() etc. Remember now?
Get Blossom’s stories in your inbox
Join Medium for free to get updates from this writer.
Great, so we can write a method on the class object. Recall from our definition of OOP that every data is seen and written as an object, so our class Person is essentially an object.
class Person{
constructor({name, age, gender, interests}){
this.name=name
this.gender=gender
this.interests=[…interests]
}
introduction(){
return ` Hi, my name is ${this.name}, I am a ${this.gender}. My interests are ${this.interests}. Nice to meet you `
}
}
When the method “introduction” is called on this person. It is going to return the latter code.
Objects
What are objects in OOP?
Even though everything is basically an object, a new object can be created from this class object. If I wanted multiple virtual people, I would use a new keyword and create new objects from my class person.
const person1 = new Person ({name: “Blossom”, gender: “Male”, interests: [“sleeping”, “binge-watching series”]})
const person2= new Person ({name: “Ade”, gender: “Male”, interests: [“Reading”, “Painting”, “Cooking”]})
If you’ve been following along, try console logging person1 and person2, you should get something pretty similar to this:
The class Person has been instantiated twice to create two new person object, and without having to rewrite the code. I could create as many persons as I want with this.
Also, if you call the method, you should get this:
This is you getting the objects you have created to do things through methods.
This is the basics of writing programs in OOP. There are more concept that you would need to familiarize yourself with before becoming fully grounded in OOP, but I hope this article simplified OOP for you.
These are great resources to continue from:
https://www.educative.io/blog/object-oriented-programming
https://www.freecodecamp.org/news/object-oriented-programming-concepts-21bb035f7260/
Happy coding.
