Property undefined in Three JS creating 3D canvas as a class

I'm trying to create a web 3D scene using Three.js, in the hope of better future maintainability I opted to code it as a class

export class RenderCanvas {

    #canvas;             // document.querySelector(idOfCanvas)
    #renderer;            // WebgL renderer
    #scene;
    #controls            // Trackball control
    #camera
    // ... other properties 
    
    constructor(){ /* ... */ } 
    startup() { 
        this.#renderer = new THREE.WebGLRenderer({
            antialias: true,
            canvas: this.#canvas
        });
        // Other initializations 
    }
    loadGeometries() { /* add models and lights into the scene */ }

    update(time) {
        const canvas = this.#renderer.domElement;
        this.#camera.aspect = canvas.clientWidth / canvas.clientHeight;
        this.#camera.updateProjectionMatrix();
        // This is for resizing the render area and fit the resolution

        requestAnimationFrame(this.update);
        this.#controls.update();

        this.#renderer.render(this.#scene, this.#camera);
    }

    main() {
        this.startup();
        this.addLights();
        this.loadGeometries(); 

        requestAnimationFrame(this.update);
    }
}

And in another script I can just do let rc = new RenderCanvas(); and rc.main();.

But in the update method, on line const canvas = this.#renderer.domElement;, I received a console error saying Uncaught TypeError: Cannot read properties of undefined (reading '#renderer').

I thought that by the time update gets called, the renderer is already initiated. But the error seems to indicate otherwise. Am I misunderstanding the execution order? Or is there something about scope in Javascript at play here?

the issue seems to be with the update function you have .. you should do it like on of those two ways :

bind:

update(time) {
    const canvas = this.#renderer.domElement;
    this.#camera.aspect = canvas.clientWidth / canvas.clientHeight;
    this.#camera.updateProjectionMatrix();

    requestAnimationFrame(this.update.bind(this)); // Bind the context here
    this.#controls.update();
    this.#renderer.render(this.#scene, this.#camera);
}

OR - using arrow function:

update = (time) => {
    const canvas = this.#renderer.domElement;
    this.#camera.aspect = canvas.clientWidth / canvas.clientHeight;
    this.#camera.updateProjectionMatrix();

    requestAnimationFrame(this.update); // Context is automatically preserved
    this.#controls.update();
    this.#renderer.render(this.#scene, this.#camera);
}