This tendency to get lost. (function bindings)

As a beginner in javascript, the "this" key word, has been a source of much confusion and frustration. in class when we first touched on the keyword, we were told about it's 5 different distinct uses and at that time, i felt like the information hurt more than it helped. Feeling almost contrary to what we had learned at the time about how different variables and functions act, the biggest rule about "this" was that: "the value of "this" is determined at function call time". As time went on and we began delving a bit deeper into things like Constructor and decorator functions, the context began to become clearer and I realized that rather than trying to digest "this" and its many applications all at once, it is much more effective to do a deep dive into each of its uses, and understand those better to get a better picture of the keyword.

In this post, I will specifically be talking about how this is used in function bindings, and even more specifically, object methods.

Let's say that I had an object that was a point on the XY grid map and it came with a method called "teleport" that will randomly place it at some point on the grid.

const point1 = {
  name: 'point1',
  x : 0,
  y : 0,
  teleport() {
    this.x += Math.floor(Math.random() * (100 - 0 + 1)) + 0;
    this.y += Math.floor(Math.random() * (100 - 0 + 1)) + 0;
    return `${this.name} is at (${this.x}, ${this.y})`
  }
}

Now if I were to call the "teleport" method for point1, it should return its new location after changing its x and y values.

point1.teleport() // =>  point1 is at (???, ???)

I'm also going to quickly create another variable "point2", but since I'm feeling lazy, this time I'm only going to give it the name, x and y properties.

const point2 = {
  name:'point2',
  x : 0,
  y : 0
}

I know that I can always just assign point1's teleport function to point2 and because of the way I have it written they should work essentially the same.

point2.teleport = point1.teleport;

 point2.teleport(3, 1) // => point2 is at (???, ???)

This is all good and well, usually, but as we all know "this" is very finicky in its preference of what to attach to.
Now let's say that I'm in the beginning stages of a test program where I specify a specific area of the map and I'll have the two points race each other to a specified area on the map.

let targetArea = {
  x1: 0,
  x2: 0,
  y1: 0,
  y2: 0
}

const randomArea = function(){

  targetArea.x1 = Math.floor(Math.random() * (100 - 0 + 1)) + 0;
  targetArea.x2 = Math.floor(Math.random() * (100 - 0 + 1)) + 0;
  targetArea.y1 = Math.floor(Math.random() * (100 - 0 + 1)) + 0;
  targetArea.y2 = Math.floor(Math.random() * (100 - 0 + 1)) + 0;
  console.log (`The target area is between (x:${targetArea.x1},y:${targetArea.x2}) and (x:${targetArea.y1},y:${randomNum})`)
}

randomArea(); // => The target area is between (x:2,y:52) and (x:1,y:39);

Now that we have the groundwork set we can start racing the two different points. I'm going to create a function that takes the two points and calls their teleport functions at random time intervals until one of them ends up in the specified target area, but I also want to give point2 a headstart. I'm going to acheive this using the setTimeout function.