Feeling lost about arrow functions in JavaScript

Question

Feeling lost about arrow functions in JavaScript

Here is the code I am currently using to increment the value of intVariable using window.setInterval.

var Arrow = (function () {
    function Arrow() {
        this.intVariable = 1;
        this.itemId = -1;
        this.interval = 25;
    }
    Arrow.prototype.activateTimer = function () {
        if (this.itemId === -1) {
            window.setInterval(this.showTimer(), this.interval);
        }
    };
    Arrow.prototype.showTimer = function () {
        this.intVariable += this.interval;
        console.log(this.intVariable);
    };
    return Arrow;
}());
var arrow = new Arrow();
arrow.activateTimer();

When I use the line below, the showTimer function is only called once:

window.setInterval(this.showTimer(), this.interval);

However, when I change it to:

window.setInterval(() => this.showTimer(), this.interval);

It works flawlessly.

I'm curious why it worked using an arrow function and would appreciate some insight.

javascript typescript

Answer 1

Answer №1

One option is to use the function reference directly, without using parenthesis.

window.setInterval(this.showTimer, this.interval);

If you opt for a function call, however,

window.setInterval(this.showTimer(), this.interval);
//                               ^^

you will be inserting the result of the function call rather than the function itself.

Alternatively, when you do

window.setInterval(() => this.showTimer(), this.interval);

you are including a function without executing it at that moment.

Answer 2

One option is to use the function reference directly, without using parenthesis.

window.setInterval(this.showTimer, this.interval);

If you opt for a function call, however,

window.setInterval(this.showTimer(), this.interval);
//                               ^^

you will be inserting the result of the function call rather than the function itself.

Alternatively, when you do

window.setInterval(() => this.showTimer(), this.interval);

you are including a function without executing it at that moment.

Answer 3

Answer №2

It's important to provide a function to the interval, not just the return value of the function.

When you use

window.setInterval(this.showTimer(), this.interval);

, what actually happens is:

var returnValue = (function () {
  this.intVariable += this.interval;
  console.log(this.intVariable); // You get your log for once
})() // -> null
window.setInterval(returnValue/*null*/, this.interval);

Then, setInterval attempts to call null after each time interval, without throwing an error in the console.

However, if you use an arrow function like () => this.showTimer(), it becomes:

var returnValue = function() {
  this.showTimer();
} // -> Function
window.setInterval(returnValue/*Function*/, this.interval);

In this case, you're providing a function to the interval.

If you forget to bind your function to the correct scope, you may encounter issues accessing specific values. Make sure to bind the function to the current object scope to avoid confusion with global scopes.

When using () =>, the anonymous function automatically connects its scope to the object, eliminating the need for extra binding.

For a proper solution, consider the following code:

    var Arrow = (function () {
        function Arrow() {
            this.intVariable = 1;
            this.itemId = -1;
            this.interval = 25;
        }
        Arrow.prototype.showTimer = function () {
            this.intVariable += this.interval;
            console.log(this.intVariable);
        };
        Arrow.prototype.activateTimer = function () {
            if (this.itemId === -1) {
                window.setInterval(this.showTimer.bind(this), this.interval);
            }
        };
        return Arrow;

}());
var arrow = new Arrow();
arrow.activateTimer();

For a demonstration, check out this JSFiddle link.

Answer 4

It's important to provide a function to the interval, not just the return value of the function.

When you use

window.setInterval(this.showTimer(), this.interval);

, what actually happens is:

var returnValue = (function () {
  this.intVariable += this.interval;
  console.log(this.intVariable); // You get your log for once
})() // -> null
window.setInterval(returnValue/*null*/, this.interval);

Then, setInterval attempts to call null after each time interval, without throwing an error in the console.

However, if you use an arrow function like () => this.showTimer(), it becomes:

var returnValue = function() {
  this.showTimer();
} // -> Function
window.setInterval(returnValue/*Function*/, this.interval);

In this case, you're providing a function to the interval.

If you forget to bind your function to the correct scope, you may encounter issues accessing specific values. Make sure to bind the function to the current object scope to avoid confusion with global scopes.

When using () =>, the anonymous function automatically connects its scope to the object, eliminating the need for extra binding.

For a proper solution, consider the following code:

    var Arrow = (function () {
        function Arrow() {
            this.intVariable = 1;
            this.itemId = -1;
            this.interval = 25;
        }
        Arrow.prototype.showTimer = function () {
            this.intVariable += this.interval;
            console.log(this.intVariable);
        };
        Arrow.prototype.activateTimer = function () {
            if (this.itemId === -1) {
                window.setInterval(this.showTimer.bind(this), this.interval);
            }
        };
        return Arrow;

}());
var arrow = new Arrow();
arrow.activateTimer();

For a demonstration, check out this JSFiddle link.

Answer 5

Answer №3

let timer = setInterval(() => this.displayTimer(), this.timeInterval);

functions similarly to

let timer = setInterval(function() {this.displayTimer()}, this.timeInterval);

setInterval(this.displayTimer(), this.timeInterval);

doesn't function because you should only pass the this.displayTimer without immediately invoking it

Answer 6

let timer = setInterval(() => this.displayTimer(), this.timeInterval);

functions similarly to

let timer = setInterval(function() {this.displayTimer()}, this.timeInterval);

setInterval(this.displayTimer(), this.timeInterval);

doesn't function because you should only pass the this.displayTimer without immediately invoking it

Feeling lost about arrow functions in JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Adding the "input-invalid" class to the input doesn't take effect until I click outside of the input field

Resolving Problems with Ion-Split-pane in the Latest Versions of Angular and Ionic

react-vimeo not firing onPause and onPlay events

Retrieve data from each URL listed in a JSON array using React

Delay the axios get request in the useEffect

Next.js is unable to identify custom npm package

Restrict the PHP generated Json response to display only the top 5 results

Error: Value of incoming scope in Angular Directive is not defined

Can one look through a div to the one beneath it by moving the cursor?

Is it considered proper to initialize an empty array within the data object of a Vue.js component?

Enabling or disabling select input based on the selected option in a previous select dropdown

What steps can be taken to have Eslint/Prettier report errors and warnings within a CI environment?

Passing parent form controls from an Angular 4 FormGroup to a child component

Issue with jQuery.off when using a dynamic function name

Failed to import due to an error from the downloaded dependency

Retrieving JSON information from a PHP script with AJAX

"422 (Unprocessable Entity) Error When Submitting a Form in Rails Application

Turn off logging functionality in a Node.JS environment

What is the best way to display pages with different states in ExpressJS?

Three.js is currently rendering a blank canvas in pure white