DEV Community

Cover image for OOPS in JS - Ultimate

OOPS in JS - Ultimate

Subham on September 23, 2024

🔥Connect: https://www.subham.online 🔥Repo: https://github.com/Subham-Maity/OOPS-in-JS-Ultimate 🔥GitHub: https://gith...
Read full post
Collapse
 
lionelrowe profile image
lionel-rowe •

JS is actually a POOPS language

Prototypical
Object
Oriented
Programming
Style

Collapse
 
brense profile image
Rense Bakker •

Poopies! 💩

Sorry 😜

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️ •

4 Pillars of OOP

This is definitely the prevalent school of thought in the field of Object Oriented Programming, and it probably used to be even more so 20 or 30 years ago.

Fundamentally, OOP only has one pillar: You bundle data and related subroutines into a single logical entity: the Object.

From there, classes emerge from the observation that we often need many objects with the same behaviours but different data, and inheritance is only one way of keeping code DRY by allowing us to write generic code once in generic classes, then having other classes build on that.

These concepts have quickly become "the way we do things" because they all make sense, but that doesn't mean they are the one and only way of doing OOP, and JavaScript shows that quite well.

Javascript is, at its core, a prototype-based OO language, not a class-based one. In recent years it has just started to offer lots of syntax sugar to implement class-based OO on top of prototype-based OO.

The class keyword is really just a convenient way to switch around the prototype and constructor: In JavaScript, the constructor has an attached prototype that it sets on the objects it creates. But using class allows us to write the prototype and define the constructor in a nested block. But all that really does is make the code easier to think about in terms of classes and instances. Under the hood, classes are still just functions.

Nice article though 👍

Collapse
 
tomasdevs profile image
Tomas Stveracek •

Good read! I have a question: Is it still important to learn OOP in JavaScript, when functional programming is becoming more popular? Many new frameworks and libraries use functional concepts. Should we focus on OOP or move more towards functional programming? What do you think?

Collapse
 
codexam profile image
Subham •

That’s a really good question! I get why functional programming is getting popular, especially with things like React hooks, but I think OOP still has its place, especially in bigger projects. Like with NestJS, which is super OOPs focused — it’s great for building scalable, maintainable backend systems. It uses stuff like classes and dependency injection, which can really help manage complex code. Honestly, it’s not like you have to choose one over the other. Most modern codebases kind of blend both, depending on what makes the most sense for the problem you’re solving.

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️ •

JavaScript is currently seeing a repeat of the trend where everything had to be shoved into the OOP paradigm whether if git or not, now with FP concepts.

The truth is, both have their moments and dogmatically trying to only use one over the other is an easy way to waste time, specially in a context where you're getting paid to build a product.

A good developer should be familiar with both and judge based on the situation which tool is the right one for the job. Sometimes that'll be FP, sometimes it'll be OOP, and more often than either of those, it's gonna be a bit of a mix.

It's also not really true that actual FP is really becoming all that popular; people usually throw that word around when they just mean higher order functions, but they often ignore other aspects of it like immutability, pure functions, etc. because writing code that is actually functional and performant in JavaScript is surprisingly difficult.

Collapse
 
efpage profile image
Eckehard •

How do you get this in Javascript?

Key Points of Method Overriding:

  1. Same Parameters: The method in the child class must have the same parameter list as the parent class method.

Even declaring public methods "by convention" seems to be a strange concept. Some of this concepts in OO-languages are used to enable better checks by the compiler. But in JS nobody will protect you from doing thing wrong...

Collapse
 
codexam profile image
Subham •

JavaScript does indeed handle things differently from stricter OOPs languages. Method overriding in JavaScript works through the prototype chain/inheritance.

Note: When you create a class (or constructor function) in JavaScript, it sets up a prototype chain. When a child class extends a parent class, it links their prototypes. When you call a method on an object, JavaScript first looks for that method on the object itself. If it doesn't find it, it looks up the prototype chain.

While it doesn't enforce the same rigid rules, we can still apply similar principles. In JS, we override methods simply by defining them in the child class with the same name. The beauty (and potential danger) is that JS doesn't fuss about matching parameters or access levels, it's all on us to keep things consistent.

Here's what we can do (but probably shouldn't):

class Parent {
  greet(name) {
    console.log(`Hello, ${name}!`);
  }
}

class Child extends Parent {
  greet(name, age) {  // Different parameters, JS doesn't complain
    console.log(`Hi ${name}, you're ${age} years old!`);
  }
}
Enter fullscreen mode Exit fullscreen mode

And here's a better approach we should follow:

class Parent {
  greet(name) {
    console.log(`Hello, ${name}!`);
  }
}

class Child extends Parent {
  greet(name) {  // Same parameters as parent
    super.greet(name);  // Call parent method
    console.log("How are you doing?");
  }
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
efpage profile image
Eckehard •

In my experience, OOP rules serve mainly to protect a programmer's against his worst enemy: Himselve! Regardless how good your style is, if you revisit a code month later - or are lucky to even reuse a larger portion of another project that was battle tested - you are happy if your code contains some barriers against unwanted mutation.

The worst things are often done with a good intention!

Maybe I´m wrong, but even the prototype chain is pretty careless with respect to types. I´m not aware that even the number of parameters matters. As long as a childs method was found in the parent, it is overwritten, regardless how it was defined.

Collapse
 
abdulmuminyqn profile image
Abdulmumin yaqeen •

Well written!

I use OOP in most of my python projects, but with JS I haven't found a use for it in my websites 😅. It not for the average Web developer.

Collapse
 
komsenapati profile image
K Om Senapati •

You can use it in the backend and in React.

Collapse
 
rahul_mishra_a61b74c90dab profile image
rahul mishra •

great article, covers almost everything.

Collapse
 
chnjames profile image
James Scott •

subham.online
Your website looks great, I want to know how you achieved it? Can you share it?

Collapse
 
prashant-ardeshana profile image
Prashant Ardeshana •

Nice 👍

Collapse
 
mannuelf profile image
Mannuel •

Great overview🤘

Collapse
 
ashnunez profile image
AshNunez •

I like the article and especially that Ben10 was use as an example. 😆

Collapse
 
golden_kanha_v profile image
Golden Kanha •

Sir , This is look like smart note along with good shortly explaination example.
That was superb 👍.

Collapse
 
gustavo_barbosa_21fe2fdd0 profile image
Gustavo Barbosa •

Good read bro!

Collapse
 
brandon_noronha_711cf5c91 profile image
Brandon Noronha •

Great article sir👍😃 I didn't know about OOP in JavaScript, but after reading your article I am now familiar with it! Thank you sir for covering all the concepts in OOP in JavaScript ✨

Collapse
 
codexam profile image
Subham •

For JAVA - dev.to/codexam/oops-in-java-ultima...

Collapse
 
usman_awan profile image
USMAN AWAN •

So great ... Revised most of js 🖤♥️☺️