Array of method calls?

[aaronjmcd2]

Hi all!
Basically, I’m trying to build an overlapping drawing that is dependent on which step the user selects. For example:

Step 1: A line.
Step 2: A line and a circle.
Step 3: A line and a circle and a square.
Step 4: A line and a circle and a square and another line.
etc… (and each of these shapes are at a predesignated set of coordinates.)

I was thinking that each of these shapes would be placed within their own respective methods, and then each method-call would be placed within an array of methods. So, when a user selects a step (say, “Step 3”) then I could loop through all the methods up to, but not exceeding, the specified method (thus, drawing a line and a circle and a square, but stopping there.)

Is this sort of thing possible, either in the way I described or by some other means?
Thanks ahead of time for any help!

[GoToLoop]

@aaronjmcd2

… their own respective methods,

AFAIK, a JS method is a function that relies on the keyword this:

this - JavaScript | MDN

@aaronjmcd2

, and then each method-call would be placed within an array of methods.

When we call a function, its current internal this becomes equal to the object of the left side of the dot . accessor operator.

Property accessors - JavaScript | MDN

However, if we assign a function reference to a variable or container, we end up calling that function w/o the dot . operator; thus its this is undefined!

As a workaround, we can call such methods via call(), so we can choose its this:

Function.prototype.call() - JavaScript | MDN

For a more permanent solution, we can call bind() at the moment we’re assigning a method to a variable or container, so its this is forever bound to a specific object:

Function.prototype.bind() - JavaScript | MDN

[aaronjmcd2]

Thank you for the help!