Sometimes getting Uncaught TypeError: myplayer.draw is not a function

Question

I was trying to create a 2d game similar to survivio while referencing to a youtube video that teaches similar things with P5js and Socket.io. Although usually the code works just fine, sometimes the console tells me "Uncaught TypeError: myplayer.draw is not a function". It can occur after refreshing the page a few times, or it can occur on the first try of getting into the page. Sorry for my bad English. Here's the code:

Server:

class Player {
    constructor(id, name, x, y, number) {
        this.id = id;
        this.name = name;
        this.x = x;
        this.y = y;
        this.number = number;
        this.speedX = 0;
        this.speedY = 0;
        
        return this;
    }
    

};
var path = require("path"); 
var http = require("http"); 

var express = require("express"); 
var socketIO = require("socket.io");

var publicPath = path.join(__dirname, '../client'); 
var port = process.env.PORT || 2000; 
var app = express(); 
var server = http.createServer(app); 
var io = socketIO(server); 
app.use(express.static(publicPath)); 
var ArrayofPlayers = [];
var playernumber = 1;

server.listen(port, function() {
    console.log("Server  running on port " + port); 
});


io.on('connection', function(socket) {
    console.log('someone conencted, Id: ' + socket.id);
    var player = {};

    socket.on('ready', function(data) {
        player = new Player(socket.id, data.name, data.x, data.y, playernumber);
        playernumber++;
        ArrayofPlayers.push(player);
        socket.emit('yourinfo', {
            id: player.id,
            name: player.name, 
            x: player.x, 
            y: player.y,
            number: player.number
        });

        socket.broadcast.emit('updateinfo', ArrayofPlayers);
        }); 
})

Client:

var socket;
var myplayer = {};
var myID;
var ArrayofPlayers = [];

class Player {
    constructor(id, name, x, y, number) {
        this.id = id;
        this.name = name;
        this.x = x;
        this.y = y;
        this.number = number;
        this.speedX = 0;
        this.speedY = 0;

        
        this.draw = function () {
            var angle = atan2(mouseY - windowHeight/2, mouseX - windowWidth/2);
            fill(255, 0, 0);
            push();
            translate(this.x, this.y);
            rotate(angle);
            circle(0, 0, 50);
            circle(10,-25,20);
            circle(10,25,20);
            this.x += this.speedX;
            this.y += this.speedY;
            pop();
        
        } 
        return this;
    };

        
    
}
class Obstacle{
    constructor(type, x, y){
        this.type = type;
        this.x = x;
        this.y = y;
    
        this.draw = function (){
            fill(211, 211, 211);
            circle(this.x, this.y, 100);
        };
        return this;
    }
}

function randomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min)
  }
  

function keyPressed() {
    if(key === "w") { 
        myplayer.speedY += -5;
    }
    if(key === "s") { 
        myplayer.speedY += 5;
    }
    if(key === "a") { 
        myplayer.speedX += -5;
    }
    if(key === "d") { 
        myplayer.speedX += 5;
    }
}

function keyReleased() {
    if(key === "w") { 
        myplayer.speedY -= -5;
    }
    if(key === "s") { 
        myplayer.speedY -= 5;
    }
    if(key === "a") { 
        myplayer.speedX -= -5;
    }
    if(key === "d") { 
        myplayer.speedX -= 5;
    }
  return false;
}

function preload(){

}
function setup(){
    socket = io();
    socket.emit('ready', {
        name: '123',
        x: 100,
        y: 100
    });
    
    socket.on('yourinfo', function(data){
         myplayer = new Player(data.id, data.name, data.x, data.y, data.number);
         console.log(myplayer);
    })
    socket.on('updateinfo', function(data){
        for(let i = 0;i < data.length; i++){
            ArrayofPlayers[i].id = data[i].id;
            ArrayofPlayers[i].name = data[i].name;
            ArrayofPlayers[i].x = data[i].x;
            ArrayofPlayers[i].y = data[i].y;
            ArrayofPlayers[i].number = data[i].number;
        }
    })
    createCanvas(windowWidth, windowHeight);
    rock1 = new Obstacle("rock", 500,500);
    translate(myplayer.x, myplayer.y);
}
function draw(){
    background(205,255,255);
    translate(width/2 - myplayer.x, height/2 - myplayer.y);
    //console.log(mouseX);
    myplayer.draw();
    rock1.draw();
}
function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
  }```

Answer 1

I'm not an expert here, but you seem to be initiating the Player object twice? It could be getting confused the myPlayer could be the Player object that doesn't have the draw function.