p5.js editor: undefined values inside class method.

[dsaw]

p5.js version

No response

What is your operating system?

Windows

Web browser and version

Google Chrome 133.0.6943.142

Actual Behavior

Running the code at https://editor.p5js.org/devsaw115/sketches/rcla7OXeq causes below error

p5.js says: [sketch.js, line 50] rect() was expecting Number for the second parameter, received an empty variable instead. If not intentional, this is often a problem with scope.

(in the rect inside draw method of the Person class.)

Expected Behavior

The code should run without the warning and correctly since the class syntax is correct.
Here is the reference with the same code that works correctly
https://editor.p5js.org/BarneyCodes/sketches/r-3a903da

Steps to reproduce

Steps:

1. Run below code in sketch
2. the this.x inside player.draw is undefined causing rect warnings inside console

Snippet:

let player;
let pressedKey = {};



function setup() {
  createCanvas(600, 600);
  player = new Player(10, 10);
}

function draw() {
  background(220); 
  // player.update();
  player.draw();
}

// function keyPressed() {
//   pressedKey[key] = true;
// }

// function keyReleased() {
//   delete pressedKey[key];
// }

class Player {
  
  Player(x,y) {
    this.x = x;
    this.y = y;
    this.speed = 4;
  }
  
  
//   update() {
//     let movementVec = createVector(0,0);
//     if (pressedKey[UP_ARROW]) {
//         movementVec.y -= 1;
//       } else if (pressedKey[DOWN_ARROW]) {
//         movementVec.y += 1;
//       }
    
//     movementVec.setMag(this.speed);
//     // console.log(movementVec);
//     this.x += movementVec.x;
//     this.y += movementVec.y;
//   }
  
  draw() {
    // console.log(this.x, this.y);
    rect(this.x, this.y, 20,100);

  }
}

[kammeows]

Did you try changing the class Player to something like this:
class Player {
constructor(x, y) {
this.x = x;
this.y = y;
this.speed = 4;
}

It seems to give no error on this

[Jatin24062005]

@dsaw there is conceptual misunderstanding
In JavaScript, the constructor must be named constructor(), not Player().
Player(x, y) { ... } should be replaced with constructor(x, y) { ... }.
@kammeows you are right..

let player;
let pressedKey = {};

function setup() {
createCanvas(600, 600);
player = new Player(10, 10);
}

function draw() {
background(220);
player.draw();
}

class Player {
constructor(x, y) { // Corrected constructor
this.x = x;
this.y = y;
this.speed = 4;
}

draw() {
rect(this.x, this.y, 20, 100);
}
}

[dsaw]

yes there was a mistake in the code that I was able to fix. Sorry for the trouble