p5.js returns UNDEFINED on this.instance_variable however, works when called explicitly. Please explain why. Example provided

Question

I have read some stack overflow and all I was able to find was that "this" was not referencing the instance variable I had in question and that it was referencing the current window. This did not help my understanding of the problem beyond parroting this back.

I AM ABLE to access the value when I call it explicitly and I have not found this comparison discussed or whether this is convention. See:

class LetterButton {
      constructor(buttonName, text1) {
        console.log(buttonName + " created");
        this.buttonName = createButton(text1);
        this.buttonName.mousePressed(buttonFunction);
        
        function buttonFunction() {
          console.log(buttonName + "*");//<--works     
          console.log(this.buttonName);//<--does not  work UNDEFINED
        } //fn
        
        
      }//constructor
    }//end class
        
    function setup() {
      createCanvas(500, 500);
      background("beige");
      button = new LetterButton("tempButton","tempText") 
      button.buttonName.position(250,250);
    }

Answer 1

I'm pretty sure this is the answer:

You don't have access to this.buttonName within a call from this.buttonName.mousePressed() Though I could be wrong.