Geek Culture
Published in

Geek Culture

Understanding OOP In JavaScript

Spoiler alert, i enjoyed making this article so much 😄

The concept of OOP or object oriented programming Isn’t something new to programming and to be fair It’s not the easiest to grasp for beginners and always a struggle to find out where it fits, in terms of the code you usually write so i decided to gather up my resources and try my best to decompose this concept to the simplest possible pieces so we can decide if OOP really solves any of our problems or not

OOP BY DEFINITION

Object-oriented programming is a programming paradigm based on the concept of “objects”, which can contain data and code: data in the form of fields, and code, in the form of procedures. A feature of objects is that an object’s own procedures can access and often modify the data fields of itself.

I’m sure you’ve read that multiple times and heard of “abstraction” and “encapsulation” and all that nerdy jargon before 😫 but let’s see how we really got to OOP from the very ground up, ✨objects ✨

Just so we’re clear I’m terrible with examples 😂 but let’s glance at this fine piece of code

WHAT IS AN OBJECT

Think of an object as a real life entity, a player in a football match, a customer of some shop, an employee of some department, just anything “alive” you want to represent with code, maybe It’s a program about your cat 😼 and you need to represent the kitty with code

In our example we modeled a player of some online game so the traditional stats to him of name and age and so on

Understanding what an object is in programming opens so many doors to you and that’s why we need to examine our player a little more

Each object has two things, properties and methods, a property is a feature associated with that very object and methods are “actions” that object can do

Think of a property like this, Mark has blonde hair so It’s a hairColor:"blonde" , and Mary has red hair so hairColor:"red" or maybe a girl named Britney is short 😏 so that’s isShortie:true

Properties can be of any data type imaginable, a string to represent names, hair colors, eye colors, favorite movies and so on, or an int to represent age, salary, number of children, height, weight and so on, or a boolean to indicate whether someone is single or not 😏 or employed or not

Methods on the other hand represent activities that the object does and only associated with that object so let’s say we’re modeling a user object so it’s natural for a user to login() , logout() , addComment() , sharePost() , addPost() and so on, so you see those are actions that are always linked to a user

NICE NOW I WANNA MAKE MORE OBJECTS PLS 😵

Ok spoiler alert we’re approaching our first problem

So let’s say you really liked this new idea of creating objects and assigning properties and methods and stuff BUT WE HAVE A PROBLEM NOW, how do objectsobjectswe represent more of those objects 😟 ? Do we just stack hundreds of lines of code to represent every single user on our e-commerce website like a psychopath and then oooopsie we have a widdle typo uwu or a new super excited dev gets a job where you at and have the disgrace or maintaining your dumpster 🔥 of a codebase

WE HAVE A SOLUTION

To solve this problem we will simply make a function we’re going to call Player() and voila problem solved 😊……

Ok but seriously bruv how is that function gonna solve the redundancy issue ????? Simply put, we’re going to create “clones” of some template known as a function so that we’re only worry about passing values to those objects……confusing ? Bet let’s jump into the examples

Alright looks like we have few bits to tackle up there 👀

  • this keyword : simply put, this this refers to the object being instantiated with that function, in other words steve and ruby so it means this name thingy refers to the one passed when creating steve and ruby objects
  • new keyword: the new keyboard is used to initialize objects from classes or functions
  • btw we can also access those attributes with the syntax ruby.name or steve.age and so on

So do we have objects now? Yes my dear, those are objects too since they have attributes and methods we can access with the dot notation syntax

btw the difference between a function and a method is that a method is only accessible through an associated object unlike a function which is access anywhere in the file at any time, for example the alert() function

BUT WE STILL HAVE ANOTHER PROBLEM 😒

Now idk about you but i noticed a teeny tiny problem in the code above, noticed how we defined that attack() method inside the constructor aka the Player() function ? Oh yes btw those are called constructor functions

So yes back to my point, the above example is quite simple and not much logic to go with it but that’s to simplify the tutorial and in the case of creating complex objects, it really won’t be super neato of you to just stack them in there so why not show you a ✨ magic trick ✨

USING PROTOTYPES

So just to recap where were we and where we at so far, we went from objects to creating objects from functions with the new keyword and now only problem we have left is organizing our methods inside the function

So we had the original problem of not being able to elegantly create multiple instances of the same “kind” aka objects from functions ( yes in our current context that’s the only way ) and now the problem is solved and we can just create one function and BAM we have multiple objects sharing the same attributes and methods but now let’s look at prototypes and how can they help us

We’re gonna rewrite the exact same code plus few more functions to see the difference of using prototypes

See how remarkably more elegant the code looks now 😊, so the prototype function helped us organize our code by separating the attributes from the methods of the function, so now each new object of the Player function will also be assigned those attributes and the method

PUTTING IT ALL TOGETHER

So far we’ve looked at how to create objects and how to use prototypes to assign methods to that function we create an object from and now we’ll just introduce the concept of classes that was added in ECMAscript2015 aka ES6 which is just a JavaScript specification, stuff like do this and don’t do that and adding new features to the language and that’s when classes were introduced so let’s have a quick look at a user class

I’m pretty sure if you’ve followed along AND CODED you won’t have any problem with the code above at all, nonetheless let’s quickly review it

  • We create a new class with the class keyword
  • The constructor functions specifies what attributes this object could have
  • The this keyword here isn’t any different than the previous examples as it now refers to the object being created from the User class
  • The rest are just class methods accessible by the object

I hope this helped clear up the whole fuss about OOP and inspired you to build amazing things with this new knowledge

Consider sharing this blog with anyone interested or getting into programming and have a lovely day ♥️

--

--

--

A new tech publication by Start it up (https://medium.com/swlh).

Recommended from Medium

Prototypes — notes

Stencil — Tutorial: Tour of Heroes

An Introduction To SWR: React Hooks For Remote Data Fetching

Grafana React Panel Plugins

Server Side vs. Client Side Rendering

This Website Accidentally Left Promo Codes in Their Source Code

How to get Jellyfin on LG TV

Frequently asked JavaScript Interview Questions With Answers (part 1)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Total nerd

Total nerd

i love to blog about things i find interesting and learn about

More from Medium

What are JavaScript Template Literals?

O.O.P in Javascript

Image representation of O.O.P in Javascript by Yasir Gaji

JavaScript: New Way Of Array Grouping in Javascript

JavaScript: Rename JSON keys

Image with an old book and on top of it an iron ring with several old keys