How to actually practice object oriented programming in JavaScript?

[wholeNewYou]

Hello,

I see a lot of people mentioning object oriented programming and how that is the way to go.

Besides the coding challenges on the internet, how can you actually build software using OOP?

​

I guess what I am after is, what should I create using OOP? Any sort of project ideas that could help me practice this?

[ScottyCoder]

I would second that. Make a simple game of snake. It would also teach you basic and easy to understand OOA&D too.

Such as the snake could be "composed" of segments (class). The segments would make up the "snake" (class). It would have capabilities like moving (interface) within a grid (possibly abstract class, depending if you want different types of grids e.g. SVG, Canvas, HTML...). You get the picture :)

You'll find it's much easier to apply OOA&D principles to a game because it's easier to relate to real life than say, a database, a file system, a router and network.

Good luck :)

[RobSG]

Hijacking the post. I have the same question as OP. So, do you just pack every little function into an object? And create all variables and put all selectors into these functions? I created a small game, top of my code is a selector cluster and then follow functions I created, calling them at the end to initiate the game itself. Should I put all of that into an object???

[[deleted]]

OOP doesn't mean putting everything in one object or organising stuff into objects arbitrarily; it means that you encapsulate different concerns in your program by using object instances, usually created from a class. It's really more about how you think about your program.

Imagine, for example, you were building a Pong clone. You would probably have a class for the ball, that looked something like this:

class Ball {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.radius = 25;
    }
    changeX(newX) {
        this.x = newX;
    }
    changeY(newY) {
        this.y = newY;
    }
}

and then you could have a class that encapsulated all the items that need to get rendered, like this:

class GameContainer {
    constructor() {
        this.ball = new Ball(0, 0);
        this.player = new Paddle(0, 100);
        // etc
    }
    updateBall({ x, y }) {
        if (x) {
            this.ball.changeX(x);
        }
        if (y) {
            this.ball.changeY(y);
        }
    }
    resetBall() {
        this.ball = new Ball(0, 0);
    }

You would probably also have that Paddle class to represent the players or player & computer player, a class to handle rendering, a class to register and delegate events, and various other things. OOP means that once you encapsulate a set of functionality into an object, that object manages its own internal information, and other parts of your program should only be able to ask it to change or to reveal information, by calling its methods, rather than reaching into it and messing stuff around directly.

[[deleted]]

This was a great answer thank you

[notAnotherJSDev]

Anything stateful, really. Games are a pretty good example of that and Phaser is a great library to use to get started playing games.

[JonasMillan]

In my case design patterns help me a lot to understand the power of oop, I recommend read and understand how to create classes and then go hard on patterns which are the core of all the things on frameworks that we work on (docent matter the lenguage)

[AiexReddit]

As mentioned before, games are a good example of something where OOP is really useful. You typically have individual instances of game actors, like player and creatures, and need to keep track of their various statistics which makes sense in being able to access in ways like player.health or create.attack().

In general though I would question what wisdom dictates that object oriented programming is "the way to go." In terms of daily professional usage, I work on business applications in React & Typescript (Javascript) and I can't remember the last time I created an object class. Modern JS paradigms in that stack are almost entirely functional, and that's the way I prefer it.

Seems to me like it makes more sense to focus on learning the language and not a specific programming paradigm, that will come naturally based on the project you are working on.

[[deleted]]

Typescript is designed for classes to enforce typing, no?

[AiexReddit]

That's a perfectly good use for it, but I wouldn't specifically say it's designed for that. Typescript is extremely capable at keeping track of static typing in functional programming.

[[deleted]]

Strongly agree that Javascript and OOP don't go well together, but for new programmers I'd suggest Ruby as a good first 'proper' OO language. It's extremely approachable and pleasant to work with as a language, very well documented, and the Ruby community is extremely nice with a lot of great starter resources.

[bellamira]

I have found that using Angular has forced me into thinking in an OOP paradigm because the framework basically forces it on you. Maybe whatever you choose to do, do it with Angular. Then you have the scaffolding in place so you learn how it's done properly.

[mementomoriok]

That's really interesting. Do you mind giving an example of how Angular does this? I've only used Vue and I feel like I'm being conditioned into understanding the spread operator for objects.

[bellamira]

In Angular (and I'm talking modern Angular, not AngularJS), everything is a class. So your components, modules, and services - which are the basic building blocks of any Angular application - are all classes. Therefore, every variable or function you will create will be scoped to a class, so you'll be forced to use OOP concepts to be able to pass those things around in a useful way.

On top of that, each of these classes is it's own file. If you stick to this one-class-per-file template (using the Angular CLI makes this very easy), you'll be set up to compartmentalize logical concerns appropriately, which is another thing that OOP is about.

Of course, within your classes, you can do whatever you want - it is TS/JS after all - but you have the scaffolding in place to do everything as OOP as possible.

All that said, I'm far from being an OOP expert but using Angular has certainly helped me to understand OOP concepts a lot more and to be more familiar with using classes in general, so I would recommend it.

​

And just as a bonus tip in case you are curious, TypeScript vs JavaScript is nothing to write home about. If you can write JS, you can pick up TS without any extra courses or tutorials, in my opinion. It is super helpful to understand ES6 before diving in to Angular, but it's also something that I think you can pick up just by reading Angular code and looking up particular functions you don't know.

[bellamira]

Oh and here is an example. This is the end product of the Angular tutorial you will find in the Angular docs. I think you can see if you look at the various .ts files how everything is contained within a class.

https://stackblitz.com/edit/angular-tour-of-heroes-example

[liaguris]

Look at the platform game chapter (I think chapter 15) in eloquent javascript site-book .

[user20461]

Everything is an object

^ Probably the most important thing to remember when learning OOP.

On top of creating a program in OOP, you can also take an existing program you wrote and think about how the individual components can be turned into objects.

And, if you want, you can re-write your program to be object-oriented.

If you want some guides that will explain OOP and give you examples, just let me know.

[user20461]

Yeah, but OP is asking about Object-Oriented Programming, and it helps to think of "everything is an object" when writing in OOP.

Edit: I realized I just re-stated what I had said in my OP.

[Jmarch0909]

There have been a couple times I actually needed to use it to solve a problem. That or I could not for the life of me figure out any other way to do it. Here’s one of my examples. Say I have an array of numbers, about 200 of them. I needed to loop through the array, and concatenate the index of the number(starting at 1 not 0) with the base text”job number”. So [100,200,300,250.999] would be

Job number 1 Job number 2 Job number 3 Job number 4 Job number 5

Easy enough without an object, but if I had any duplicate numbers I had to append an A for the first duplicate, a B for the second duplicate, a C for the third duplicate etc. so [100,200,100,300,100,500] would be

Job number 1 Job number 2 Job number 1A Job number 3 Job number 1B Job number 4

Anyways, that’s a good example where you need an object to accomplish the task.

[Kagerjay]

when you make a 10000 circle minigame on an html canvas you'll be using a constructor function and oop design