educative.io

Not able to understand, context binding article

Courses
,
#1

I did not understand the Ball function.
Query 1:
So far, we covered 2 types of function.
1. Fat arrow function, stands with =>
2. The normal function.var sum = function(a, b)
Whats this function syntax for below
setInterval( function() {
this.x += vx;
this.y += vy;
console.log( this.x, this.y );
}, this.dt );

is setInterval itself a function ? It doesnt seem to be fat arrow.
why there is opening circular bracket next to setInterval ? and hence, whats setInterval

Query 2.
Why we are passing this.dt, ?
What we expect this function to do ?

Course: https://www.educative.io/collection/10370001/5765283616653312
Lesson: https://www.educative.io/collection/page/10370001/5765283616653312/5705441837318144

#2

Hi @Rishikesh_Pawar,
I’ll address your queries one by one:

Query 1: The Ball function is a constructor function in JavaScript, which means it is used to create objects with specific properties and behaviors. In this case, the Ball function takes four parameters: x, y, vx, and vy, which represent the initial position and velocity of the ball.

The code snippet you shared is inside the Ball constructor function. Let’s break it down:

setInterval(function() {
    this.x += vx;
    this.y += vy;
    console.log(this.x, this.y);
}, this.dt);
  1. setInterval: setInterval is a built-in function in JavaScript that repeatedly calls a function or executes a code snippet at a specified interval (in milliseconds). It is not a fat arrow function; it’s a regular function provided by the browser or the Node.js environment.
  2. The opening circular bracket after setInterval indicates that it’s a function invocation, and it expects two arguments: the function to be executed and the time interval (in milliseconds) for how often it should be called.
  3. The first argument is an anonymous function defined within the setInterval. This anonymous function is what will be executed at the specified interval.
  4. Inside the anonymous function, this refers to the context in which the function is executed. However, because the anonymous function has its own scope, the value of this inside the anonymous function is not the same as the this in the outer scope (inside the Ball constructor function).

Query 2: In the setInterval code snippet, this.dt is passed as the second argument to setInterval. The this.dt value represents the time interval (in milliseconds) for how often the anonymous function inside setInterval should be executed.

The purpose of this setInterval code is to create an animation effect for the Ball object. The anonymous function updates the position of the ball (this.x and this.y) based on its velocity (vx and vy). It then logs the updated position (this.x and this.y) to the console.

However, there is a problem with this code. Since the anonymous function has its own scope, the value of this inside the anonymous function does not refer to the Ball object, causing issues with accessing and updating its properties. To address this, the lesson suggests using either the self variable or the ES6 arrow function, which automatically binds the context and ensures that this inside the function refers to the Ball object.

I hope this helps!
Happy Learning :slight_smile:

#3

hi @Komal_Arif
here if we write code like below mentioned it should work
var Ball = function( x, y, vx, vy ) {
this.x = x;
this.y = y;
this.vx = vx;
this.vy = vy;
this.dt = 25; // 1000/25 = 40 frames per second
setInterval( function() {
var x = vx;
var y = vy;
console.log( x, y );
}, this.dt );

}

var ball = new Ball( 0, 0, 10000, 10000 );

Then why to use this keyword inside setIntervel. or bind? We are using this because its just another way of write code or is their anything else? Does using this and bind provide any other benefits if yes please elaborate the usecase or any edge case where bind and this could be useful.

#4

Hi @J_Shanmukh_Rao,
Inside the setInterval function, this does not refer to the Ball object as you might expect. Instead, it refers to the global context (in a browser environment, it would be the window object). This means that when you try to access this.dt, it might not work as expected because this is not referencing the Ball instance.

To address this issue, you can use the bind method or the ES6 arrow function to ensure that this inside the setInterval function refers to the Ball instance.

Using bind or arrow functions ensures that this inside the setInterval function correctly refers to the Ball instance, allowing you to access its properties like this.vx and this.vy . This is important for maintaining the expected behavior and avoiding unexpected issues in your code.