Getting returned "[object Object] NaN" - Javascript

Question

As the title says, when i execute my code, in the console i get returned "[object Object] NaN" (with quote marks in console)

As i am always not so sure what code to send out as their might be other factors involved, I am going to post all my code in

Main.Js

var ctx = document.getElementById("canvas").getContext("2d");
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;

var zombie1 = new Rectangle(300, 300, 20, 50);
var border = new Rectangle(0, 0, window.innerWidth, window.innerHeight);
var debugPlayer = new Rectangle(400, 400, 50, 50);

zombie1.ChangeColour("rgb(0, 0, 255)");
border.ChangeColour("rgb(150, 150, 150)");
border.ChangeThickness(300);
debugPlayer.ChangeColour("rgb(100, 100, 100)")


var playerup = "false"
var playerdown = "false"
var playerleft = "false"
var playerright = "false"

var update = function(){

    if (playerup == "true"){
        debugPlayer.y = debugPlayer.y - 1
    };
    if (playerdown == "true"){
        debugPlayer.y = debugPlayer.y + 1
    };
    if (playerleft == "true"){
        debugPlayer.x = debugPlayer.x - 1
    };
    if (playerright == "true"){
        debugPlayer.x = debugPlayer.x + 1
    };

    DoCollision(debugPlayer, zombie1);

    var processedZombiewidth = parseInt(zombie1.width, 10);
    console.log(debugPlayer.x, zombie1.x, debugPlayer + processedZombiewidth); // I am getting "400, 300, "[object Object] NaN" in console.

};
var makeScreen = function(){
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    border.Draw(ctx, "true");
    debugPlayer.Draw(ctx, "false")
    zombie1.Draw(ctx, "false");
};

var DoCollision = function(rect1, rect2){
    if (rect1.x > rect2.x){
        if (rect1.x < rect2.x + rect2.width){
            console.log("fat")
        };      
    };
};

var updateFunc = function(){
    update();
    makeScreen();
};



setInterval(function(){updateFunc();}, 1);




$(document).keyup(function(objEvent){
        objEvent ? keycode = objEvent.keyCode : keycode = event.keyCode; 
        console.log(keycode);

        if (keycode == 87){ //W
            playerup = "false"
        };
        if (keycode == 65){ //A
            playerleft = "false"
        };
        if (keycode == 83){ //S
            playerdown = "false"
        };
        if (keycode == 68){ //D
            playerright = "false"
        };

});
$(document).keydown(function(objEvent){
        objEvent ? keycode = objEvent.keyCode : keycode = event.keyCode;
        console.log(keycode);
        if (keycode == 87){ //W
            playerup = "true"
        };
        if (keycode == 65){ //A
            playerleft = "true"
        };
        if (keycode == 83){ //S
            playerdown = "true"
        };
        if (keycode == 68){ //D
            playerright = "true"
        };
});

rectangle.js

Rectangle = function(x, y, w, h){

this.colour = "rgb(0, 0, 0)"
this.thickness = 1

this.x = x;
this.y = y;
this.w = w;
this.h = h; 

this.Draw = function(ctx, hollow){
    ctx.fillStyle = this.colour;
    ctx.strokeStyle = this.colour;

    if (hollow == "true"){
        ctx.lineWidth = this.thickness
        ctx.strokeRect(this.x, this.y, this.w, this.h);
    };
    if (hollow == "false"){
        ctx.fillRect(this.x, this.y, this.w, this.h)
    };

};
this.ChangeColour = function(colour){
    this.colour = colour
};
this.ChangeThickness = function(thickness){
    this.thickness = thickness
};

Answer 1

There are two errors here:

1) zombie1 does not have a property width, only w. Converting a non-number value using parseInt() will produce NaN.

2) You are adding the number (or rather NaN) to an object debugPlayer. This would have produced NaN in any case.

To fix, try adding w to debugPlayer's x:

//var processedZombiewidth = parseInt(zombie1.width, 10);  not needed
console.log(debugPlayer.x, zombie1.x, debugPlayer.x + zombie1.w);