# Array of method calls?

**URL:** <https://discourse.processing.org/t/array-of-method-calls/10327>\
**Category:** Coding Questions\
**Created:** [April 16, 2019, 2:55am UTC](https://discourse.processing.org/t/array-of-method-calls/10327 "2019-04-16T02:55:31Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![aaronjmcd2](https://avatars.discourse-cdn.com/v4/letter/a/46a35a/32.png) [@aaronjmcd2](https://discourse.processing.org/u/aaronjmcd2)\
**Post date:** [April 16, 2019, 2:55am UTC](https://discourse.processing.org/t/array-of-method-calls/10327/1 "2019-04-16T02:55:31Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [April 16, 2019, 3:42am UTC](https://discourse.processing.org/t/array-of-method-calls/10327/2 "2019-04-16T03:42:31Z")

</div>

> [@aaronjmcd2](#):
>
> … their own respective methods,

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

> **[this - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this)**
>
> A function's this keyword behaves a little differently in JavaScript compared to other languages. It also has some differences between strict mode and non-strict mode.

> [@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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Method_binding)**
>
> Property accessors provide access to an object's properties by using the dot notation or the bracket notation.

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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call)**
>
> The call() method of Function instances calls this function with a given this value and arguments provided individually.

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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)**
>
> The bind() method of Function instances creates a new function that, when called, calls this function with its this keyword set to the provided value, and a given sequence of arguments preceding any provided when the new function is called.

---

<div class="post-metadata">

**Author:** ![aaronjmcd2](https://avatars.discourse-cdn.com/v4/letter/a/46a35a/32.png) [@aaronjmcd2](https://discourse.processing.org/u/aaronjmcd2)\
**Post date:** [April 16, 2019, 5:21pm UTC](https://discourse.processing.org/t/array-of-method-calls/10327/3 "2019-04-16T17:21:42Z")

</div>

Thank you for the help!