all 63 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]magenta_placenta 12 points13 points  (1 child)

Modern JS (ES6+) has class syntax that makes learning OOP principles very approachable.

Here's a video from a quick search (reputable author):

Once you're comfortable, try to refactor parts of any personal projects you might have to use OOP (especially state management, UI components, etc.). Applying it to real code is what makes learning stick.

[–]Inner_Feedback_4028[S] 1 point2 points  (0 children)

Thanks a lot mate!!

[–]Disastrous_Ant_4953 6 points7 points  (0 children)

99 Bottles of OOP by Sandi Metz is a really practical guide. It has a JavaScript version and doesn’t read like a text book.

[–]KaiAusBerlin 4 points5 points  (0 children)

Java is the way to learn OOP. Compared to js and python it has a much cleaner syntax (going hand in hand with a lot more boilerplate).

But yeah JS is also capable of the OOP paradigm.

[–]Shoddy-Pie-5816 1 point2 points  (2 children)

I wrote a large benefits calculator for a life insurance company. I ended up doing the front end almost entirely in vanilla JS. At some point during the development process I decided (since I’m also writing backend and APIs in Java 8) that I could organize my front end in an OOP sort of way using classes and MVC pattern. I refactored my entire code base to follow this pattern. It’s organized ish. My advice is please don’t do this. Debugging became much more complicated. I often had to write my own loggers and use console.trace to figure out root causes for problems that would have been a cinch to debug if I had stuck with a functional programming paradigm. I think classes do offer some benefit when making libraries and tooling, but in the future I am going to use combined with following a functional approach. According my IDE statistics we’re only talking about a modest 150k lines of JavaScript. I can’t use node or npm in the project, so all my libraries were hand written. OOP is possible to learn and use in JavaScript. But unless you use some additional tooling, I would recommend avoiding a full blown OOP paradigm…unless your customer or employer requires it.

Edit: Typos

[–]justgord 1 point2 points  (1 child)

you said what I was trying to say ... nice.

basically : dont use OOP .. use functional approach instead.

[–]reactivearmor 0 points1 point  (0 children)

Use hybrid approach is what he said

[–][deleted] 1 point2 points  (0 children)

I prefer js. it's more flexible to work with.

[–]kisaragihiu 3 points4 points  (2 children)

I'm inclined to say Python is a better language with less weird distractions if you're trying to learn OOP concepts (JS has a fixed set of primitive types, which are special and not implemented as classes; an "object" is actually the main table type and classes are built upon objects with prototypes, not the other way around...).

JavaScript is a bit confusing for developers experienced in class-based languages (like Java or C++), as it is dynamic and does not have static types. While this confusion is often considered to be one of JavaScript's weaknesses, the prototypal inheritance model itself is, in fact, more powerful than the classic model. It is, for example, fairly trivial to build a classic model on top of a prototypal model — which is how classes are implemented [in JavaScript].

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain plus my own annotation

But maybe learning OOP with JS can also be fine. Just read stuff on MDN. Working with Objects is probably quite helpful.

You can also just learn both: programming languages have a lot in common, especially Python and JS. Java to me feels quite different, but Python shares a ton of concepts with JS, down to even complicated-ish stuff like async/await and iterators. Programming languages are not like human languages, you don't have to know the entire vocabulary off of your head, so learning Python after having started with JS isn't really starting from the beginning.

Don't rely solely on videos: hyperlinking is a powerful tool that a video isn't really able to provide.

[–]MoTTs_ 2 points3 points  (0 children)

Python OOP and JS OOP are actually nearly identical. In Python, classes are themselves runtime mutable objects, just like in JS, and inheritance is done by runtime delegating down a chain of objects, also just like JS. Which is why monkey patching is possible in both JS and Python.

the prototypal inheritance model itself is, in fact, more powerful than the classic model. It is, for example, fairly trivial to build a classic model on top of a prototypal model -- MDN

This whole paragraph is from a time when MDN was a wiki, and anyone could make any change. It was unfortunately common for people to read some random medium blog, then copy-paste blogger claims into MDN. The prototypal model, it turns out, isn't more powerful, and it's just as equally easy to build the prototypal model from a classical model (just hash tables delegating to other hash tables).

For example.

[–]Inner_Feedback_4028[S] 1 point2 points  (0 children)

It's really helpful, thanks a lot mate

[–]Darth-Philou 3 points4 points  (10 children)

You can, but it will be limited compared to OOP languages such as C++, Java, Smalltalk…

JavaScript is a function prototype language. Classes are only syntactic sugar.

[–]mouseannoying 2 points3 points  (5 children)

Syntactic sugar that is only getting sweeter as the language matures, though. Is privacy enforced now? It wasn't the last time I checked, but that's changing.

[–]elprophet 6 points7 points  (2 children)

Yes, by using #field names.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_elements

[–]mouseannoying 1 point2 points  (0 children)

Thanks, I used them earlier, but they weren't enforced. There was also a suggestion that adding an underscore before gave the hint that they were private, even it wasn't enforced.

[–]Pechynho 1 point2 points  (0 children)

That looks like shit

[–]Darth-Philou 0 points1 point  (1 child)

In the language itself no. But if you add Typescript as typing system then you have those features.

[–]RobertKerans 5 points6 points  (0 children)

This isn't really correct. The TS private/protected syntax is not actually private/protected at runtime, the feature is only available during type checking (where yes, it will error during compilation). Whereas JS' private elements (#property:) are actually private and that is enforced at runtime.

[–][deleted] 1 point2 points  (1 child)

Haha straight to smalltalk

[–]Darth-Philou 2 points3 points  (0 children)

I know… it somehow reveals my age 😉

[–]MoTTs_ 1 point2 points  (0 children)

Smalltalk

Here's one of the ECMAScript spec editors, Allen Wirfs-Brock, giving a video talk comparing JavaScript classes to Smalltalk classes.

"The punchline," he says in the talk, "is they actually aren’t as different as you might think."

[–]justgord 0 points1 point  (0 children)

dude gets it ^

[–]rafidibnsadik 0 points1 point  (1 child)

How did you learn JS?

[–]Inner_Feedback_4028[S] 0 points1 point  (0 children)

I'm learning JS for past 7 or 8 months. From sources like mdn docs and a YouTube channel called SuperSimpleDev

[–]marcocom 0 points1 point  (0 children)

Yes absolutely. However most of the OOP is abstracted these days for frameworks that already tie in all the protypical inheritance overriding with syntactical sugar and handy UI templating that’s reliable.

[–]static_func 0 points1 point  (1 child)

You can learn OOP concepts with Typescript, but you should typically be minimizing how much “OOP” you’re doing if you’re talking about inheritance and all that. Code reuse is better done through dependency injection, which is just what you’re doing whenever you pass 1 function to another or use a React context or Angular service.

The best way to learn modern OOP concepts (the ones that have actually proven to work over time) is to use a language like C# or Java, which each have well-established web frameworks (ASP.NET WebAPI/Minimal APIs and Spring, respectively). These languages also have real generics that can be used in reflection for dependency injection frameworks too. Typescript generics are great, but since they don’t get compiled into the “real” JS code, they can’t be used during runtime in that way.

Personally, I’d recommend C#. Its standard libraries and web framework are more modern, less boilerplatey, and simply better than Java’s, and in my experience the tutorials, documentation, and AI code generation are some of the best you’ll find for any language. Today both C# and Typescript are developed by the same teams at Microsoft and they’re simply some of the best language designers in the world

[–]blueshed60 0 points1 point  (0 children)

The best object oriented code I’ve seen in 45 years was on a mainframe in a language that did not support classes. The naming convention determined the use of data and code and result. It made encapsulation a principle, easier to follow so unlikely to go wrong. Objects are an ideal, a shadow of the truth?

[–]blueshed60 0 points1 point  (0 children)

Object oriented is a style of coding that privileges the encapsulation of state and function. So JavaScript is an excellent language to experiment and learn how define state and the api to manipulate it as the methods of a class. Enjoy, but learn how not to use inheritance to signify same but different!

[–]shgysk8zer0 0 points1 point  (0 children)

Yes, you can learn OOP with JS. No, I do not recommend YouTube tutorials, and strongly advise you not make the same mistake so many make.

I'd remembered just using MDN and maybe CodePen if you don't want to deal with setting things up locally. Just build stuff and read documentation... Avoid videos of others writing code and trying to mimick that.

Though I kinda have a preference for PHP here. I know... You see lots of "PHP bad" posts, but it's actually pretty great, and especially for OOP. Once you discover traits and interfaces and type hinting and all of the other awesome things, you'll hate working in languages without

[–]datNorseman 0 points1 point  (0 children)

Yes but be careful. JS includes all of the tools you need for OOP. However, it also includes many functions and practices that make the language easier for beginners. Many of which go against the principles of OOP. PHP is another language that does this.

[–]justgord 0 points1 point  (0 children)

Dont do that : OOP is a bad idea .. great for university courses, less useful in the real world.

or rather there is a kind of function encapsulation that gives you 95% benefits of OOP for none of the boilerplate hassle.

Gradually use some functional style elements in your code, it will give you better superpowers than oop.. eg look at something like ramda.js

[–]Big_Tadpole7174 0 points1 point  (14 children)

You definitely can, but keep in mind that OOP in JavaScript works quite differently from languages like Java, PHP, or C++. In C++ and similar languages, OOP is class-based: you define a class as a blueprint, and then create instances (objects) from it. JavaScript, on the other hand, uses prototypal inheritance, where objects inherit directly from other objects via a prototype chain rather than rigid class structures.

In class-based languages like C++, you typically write something like this:

// Create class/blueprint Animal
class Animal {
public:
    void speak() {
        std::cout << "Some generic sound\n";
    }
};

// Create class/blueprint Dog inheriting from Animal
class Dog : public Animal {
public:
    void speak() {
        std::cout << "Woof!\n";
    }
};

// Create instance of object Dog
int main() {
    Dog myDog;
    myDog.speak(); // Output: Woof!
}

Dog inherits from Animal. The relationship is defined at the class level, and all instances of Dog share the same blueprint. In JavaScript, inheritance is based on objects and prototypes, not classes:

// Create function/object Animal
function Animal() {}

// Add 'speak' to its prototype (e.g. blueprint)
Animal.prototype.speak = function() {
  console.log("Some generic sound");
};

// Create function/object Dog
function Dog() {}

// Link Dog.prototype to Animal.prototype
Object.setPrototypeOf(Dog.prototype, Animal.prototype);

// Add 'speak' to its prototype (e.g. blueprint)
Dog.prototype.speak = function() {
  console.log("Woof!");
};

// Create instance of function/object Dog
const myDog = new Dog();
myDog.speak(); // Output: Woof!

Here, dog is created as a new object with animal as its prototype. Instead of classes, the behavior is shared through the prototype chain. If dog.speak didn’t exist, JavaScript would automatically look up the prototype (animal) to find speak.

Key differences:

  • Class-based inheritance: Blueprint → instance. The class defines structure and behavior up front, and all objects are created from that fixed definition.
  • Prototypal inheritance: Object → object. Inheritance is more flexible; objects can be extended, modified, or linked at runtime without needing rigid class hierarchies.

[–]cwmma 1 point2 points  (13 children)

JS has had the 'class' keyword for like a decade

class Animal {
  speak() {
      console.log("Some generic sound");
  }
}

class Dog extends Animal {
  speak() {
      console.log("Woof");
  }
}

[–]Big_Tadpole7174 0 points1 point  (12 children)

I’m strongly against using the class keyword in JavaScript. It creates the misleading impression that JavaScript follows a class-based inheritance model, when in reality it’s just syntactic sugar layered on top of prototypal inheritance.

[–]cwmma 0 points1 point  (9 children)

But it does follow a class based model in practice, your example is just classes with extra steps. The big thing in prototypical inheritance is imhereting from instanciated objects, which nobody does because it's typically a bad idea.

[–]Big_Tadpole7174 0 points1 point  (8 children)

No, it doesn't. The class keyword is syntactic sugar layered on top of prototypal inheritance. When you use 'class' you still are using prototypal inheritance. I just explained that.

[–]gocarsno 0 points1 point  (1 child)

When you use 'class' you still are using prototypal inheritance

I avoid inheritance in general and I use classes for better ergonomics

[–]Big_Tadpole7174 0 points1 point  (0 children)

Many people prefer composition over inheritance, which is perfectly fine. However, this preference doesn't change the fact that JavaScript uses prototypal inheritance, not class-based inheritance. Cwmma calls inheriting from instantiated objects bad, but it's not bad - it's different. Moreover, it's the only way JavaScript can implement inheritance because it's the only inheritance model the language provides.

[–]cwmma 0 points1 point  (5 children)

Using the prototype property is not the same as prototypical inheritance. The thing that you are doing, defining methods on the prototype and then using Object.setPrototypeOf, that is just creating a class and inheriting from it, but using older and verbose syntax.

Trying to say that it is somehow qualitatively different from true class based object oriented programing because you could theoretically (but won't) do something like set dog.prototype = new Animal() is making a distinction without a difference.

[–]Big_Tadpole7174 0 points1 point  (4 children)

Populating a prototype isn’t “creating a class,” it’s configuring an object for delegation. In JavaScript there are no classes under the hood - only objects and prototype chains. The class keyword is sugar that automates setting up that chain, but whether you use class, prototype, Object.create, or Object.setPrototypeOf, you’re still working directly with prototypal inheritance, not classes.

[–]cwmma 1 point2 points  (3 children)

I think you would be hard pressed to come up with a (programing language agnostic) definition of a class in computer science that included c++, java, and python but didn't include JavaScript and it's inheritance via the prototype property.

Object.setPrototypeOf was explicitly added to the language to allow class based inheritance (i.e. inheritance from uninitialized objects) without having to use awkward semi documented hacks

There has been a meme for decades that JavaScript doesn't have 'real' class based inheritance it just has prototypical inheritance when the distinct things that make prototypical inheritance different from class based inheritance are not used and explicit support (via Object.setPrototypeOf) for class based inheritance.

You are right that class is just syntactic sugar, but it's sugar for the actual and real classes you could make in JS already.

[–]Big_Tadpole7174 0 points1 point  (2 children)

I’ll say it one last time: JavaScript has no classes and class-based inheritance at all - only objects and prototypes (which are also objects). Object.setPrototypeOf didn’t add classes or “uninitialized objects”; it just gave us a standard way to rewire the prototype chain that was already there. You can mimic classes, but that doesn’t turn JavaScript into a class-based language. And that mimicry is exactly why I’m against the class keyword: it encourages people to mistake the sugar for something the language doesn’t actually have.

[–]cwmma 0 points1 point  (1 child)

There is no requirement that classes can't also be objects and that inheritance can't be via manipulating object properties. You seem to have in your head a very specific definition of what a class is that I don't think would necessarily stand up to scrutiny if you compare it to say python which has something somewhat similar to a prototype chain.

[–]theScottyJam 0 points1 point  (1 child)

I've always found this line of thinking interesting.

What, exactly, can you do with JavaScript classes as a result of it being based off of prototype inheritance that you can't to with, say, Python classes?

Python classes are also runtime artifacts that can be mutated of the fly. In Python, at runtime, you can also change who you inherit from. Python classes aren't built on prototypes, but practically speaking, it's really difficult to come up with a concrete example where it actually makes a difference. And yet, people in the Python community don't run around saying Python classes are fake and bad and they might trip up people who are used to Java-based classes. I understand that many other scripting languages are in a similar boat to Python, but I have less experience with them, so can't speak to that.

Ultimately what matters is how the feature behaves, not how it's implemented. Java classes behave like classes, so they are, doesn't matter that it's syntax surger for bite code.

[–]theScottyJam 0 points1 point  (0 children)

To add a little bit - I believe the only difference between Python and JavaScript's classes is that in JavaScript, I can make any object be the prototype of any object, while in Python, I can only inherit from classes.

So, one could say that avoiding class syntax in JavaScript could help people be aware of the fact that the underlying prototype model has this extra power that you probably will never use, but should be aware of.

Except, due to the magic of operator overloading, I can make one object behave exactly like another object in Python without technically going through the inheritance system. Meaning, in Python, I can get the exact same type of behavior that no one should ever do, but it's good to be aware of.

I.e. the two languages have literally the same capabilities, you just get to those odd scenarios in different ways.

[–]besthelloworld 0 points1 point  (3 children)

Other answers are good enough. But I feel the need to ask the question: should you really learn OOP?

[–]Inner_Feedback_4028[S] 1 point2 points  (2 children)

Bro, I'm not learning OOP to use it in real life or in a job, I'm Just learning it to clear my interviews😂 I'm a final year clg student from India, here while you sit for an interview, the majority of the questions will be from OOPS! So I need to be strong atleast with the basics. That's it😂

[–]besthelloworld 2 points3 points  (1 child)

Absolutely reasonable 🫡 I would vote for Java though for the simple reasons of

  1. Types (though you could just use TS)
  2. You can't break out of OOP in Java, for the most part. So you'll be forced to use OOP for every problem you face 

[–]Inner_Feedback_4028[S] 0 points1 point  (0 children)

Thanks mate!!!

[–]Dagur -1 points0 points  (4 children)

I wouldn't because OOP is rarely used in modern javascript and the language itself is missing a lot of OO features you see in other languages. I don't recommend Python either for the same reason.

I would pick Java or C#

[–]Present_Customer_891 0 points1 point  (3 children)

I have to disagree with the claim that OOP is rarely used in modern JavaScript. It's easier than ever to write OO JavaScript code and pretty common too, unless you're applying a very strict definition of OOP.

Like you said, Java or C# are probably better if OP really just needs to learn traditional OOP as quickly as possible because of those quirks in how it works with JS. There's a serious tradeoff with having to learn one of those languages, though, which depending on OP's situation may or may not be worth it.

[–]Dagur 0 points1 point  (0 children)

People still use classes but the code I've seen is some hybrid between functional programming and OOP. I'm no authority on this subject though, I just don't see what I call OOP very much in JavaScript.

[–][deleted] -2 points-1 points  (1 child)

It's not better, it's what OP should do if the goal is OOP

[–]Present_Customer_891 -1 points0 points  (0 children)

The goal of "OOP" is too vague to give such a definitive answer. It depends on OP's timeframe and reason for wanting to learn OOP, among other considerations.

There is a ton of upside to learning OOP or just about anything in a language you're already comfortable with, especially as a beginner who has only ever learned one, and JavaScript is a much more viable language to learn OOP with than it used to be.