Object oriented programming beginner's issues

As I am going through JavaScript course, in tic tac toe project I have tried implementing object oriented programming principles.

That resulted in a huge mess with my code constantly refering to previously assigned objects instead of new ones. In my previous thread thankfully I discovered the existence of garbage collector and I knew beforehand that objects are stored in variables by reference to their memory allocations so I understood the issue and I fixed it, but the fix was dirty because the code IS dirty and I am aware of it.

Nonetheless, I don’t understand how to write proper and maintainable code in OOP as a beginner.

Should I keep it without OOP and then refactor it into OOP or should I just keep trying OOP from the start of the project and better code will come with experience?

I perfectly understand constructors, factory functions, IIFE, namespacing, prototypal inheritance right now. But writing code which will properly implement these principles seems so hard to me.

Any advice?

Hi, this a late answer but anyway here is.

What i do is writing before startig what are the objects needed to model the problem.

For example in the tic-tac-toe i need players, board, game… etc.
Then i make the factory functions needed to create these objects. I start modeling each one independenly of the others. This is because the behavor of each type of objects is independent of the others (in the begining).

here is an example of how i model Player

const Player = (name, piece) => {
  let playerName = name;
  let playerPiece = piece

  this.getName = () => playerName;
  this.getPiece = () => playerPiece;
  this.equals = (player) => {
	return name == player.getName() && piece == player.getPiece();
   }
  this.setName = (newName) => {playerName = newName};
  return { getName, getPiece, equals, setName };
}

in this way the state of an object is given by the variables name and piece, and the methods do what their name say.
I only return the methods needed and not the variables because the encapsulation thing.

With the methods programed inside the factory function you have the context of what is the state of the object and how to manipulate them. For example

  player1.name==player2.name && player1.piece && player2.piece
  player1.equals(player2);

The two lines to the same, but in the second i use the method programedn in the factory function.

also i could do Player

 player1.putPieceIn(board,position);

this line is readed very well. I want to put a piece in the board object in the position (this could be a position object whit his own factory fuction and methods). And what has to do this method

this.putPieceIn = (board,position) => {
	board.putPieceIn(piece, position);
}

in this way i call the method in the Board factory function and the board state changes.

The player cant change directly the state of the board, only can ask the methods of board to change his state. The player object dosnt know the state of the board so it could overwrite a prevoius move, in change the board object can check if can put a piece or not.

Doing in this way the code is more extense but the tasks are separated and organized by type of objects.

For example if board has a method thereIsAWinner, that checks who win, to change the rules you only have to change only the code in the Board factory function (maybe only this method).

If any part of this is confusing or not well explained ask about it.

Hope this will help.

1 Like

@fernandopaz1 You are an absolute magnificent BEAST. Thank you!

1 Like