Uncaught TypeError: Cannot read property undefined

Greetings,

I am having a problem with these blocks of code here:

update(){
        this.rays=[]; // Set rays to an empty array
        for(let i=0; i<this.rayCount;i++){
            const rayAngle=lerp(
                this.raySpread/2,
                -this.raySpread/2,
                i/(this.rayCount-1)
            );

            const start={x:this.car.x, y:this.car.y};
            const end={
                x:this.car.x-
                    Math.sin(rayAngle)*this.rayLength,
                y:this.car.y-
                    Math.cos(rayAngle)*this.rayLength
            };
            this.rays.push([start,end]);
            console.log(this.rays.push()) //debug statement


 draw(ctx){
        try {
        for(let i=0;i<this.rayCount;i++){
            ctx.beginPath();
            ctx.lineWidth=2;
            ctx.strokeStyle="red";
            ctx.moveTo(
                this.rays[i][0].x,
                this.rays[i][0].y,
            
            );
            if (this.rays[i][0]=0){
                console.log(this.rays)
            } else {
                console.log(`The current value for rays is ${this.rays}`); //printing the current value of this.rays to make sure they are within range
            }
            ctx.lineTo(
                this.rays[i][1].x,
                this.rays[i][1].y,
            )
            ctx.stroke();
            }
        } catch (e) {
            console.error(e); // Allows the road to display but not the car or rays
        }

on ctx.moveTo(this.rays[i][0].x),, the index seems to be out of range. However, when I wrap the code in a try catch block and print out the values of the rays to make sure they aren’t undefined, they seem to be working just fine in both the update method and the draw method. What I expect to happen is for the car to be driving around with rays coming out of the front of the car, but the indexing error in the draw method breaks the whole car. With the try catch block, the road still exists along with all the controls (the car is still moving but no longer visible to the user).

Let me know if there is any more information I can provide.

Code Repository

From what I can see, the error occurs in the draw method of the Sensor class.

The problem line is:

            ctx.moveTo(
                this.rays[i][0].x,
                this.rays[i][0].y,
            
            );

At this point in your app, this.rays is still an empty array like it was created in the constructor method of the Sensor class. In your Sensor constructor you assign 3 to rayCount which is used in the for loop of the draw method of the class, but since this.rays is empty, when you reference this.rays[0][0].x, there is no this.rays[0] element, so since this.rays[0] is undefined, you can not access the zero index of undefined.

1 Like

I had figured that was the problem, I just wasn’t completely sure. Now, what will fix the problem? I see that on google chrome, when I print out the number of rays, it gives a continuous output of how many there are in the update method, which comes out to three, so I don’t understand how the array itself is being read as undefined. Should I increment from a different number, or wrap it in a try/catch block?