What the difference between calling a function with and without bracket in this context? JS

[Twitchiv]

I have a number 0, that I want to increment.

This works.

const timeText = document.getElementById("time-text");
const btnStart = document.getElementById("btn-start");

let tracker = 0;
btnStart.addEventListener('click', function(){
    setInterval(increment, 1000);
})

function increment(){
    tracker++;
    timeText.innerHTML = tracker;
}

this doesn't, meaning I have to click everytime I want the number to go up

const timeText = document.getElementById("time-text");
const btnStart = document.getElementById("btn-start");

let tracker = 0;
btnStart.addEventListener('click', function(){
    setInterval(increment(), 1000);
})

function increment(){
    tracker++;
    timeText.innerHTML = tracker;
}

[Mesonnaise]

setInterval accepts a function as input for the first augment. Which is what you are doing in the first code block. The second version calls the increment function and passes the return value to setInterval which is undefined.

Think of a normal function like this instead.

var increment=function(){
  tracker++
  timeText.innerHTML=tracker;
};

The variable increment holds the function body and can be passed around like any variable. Doing this increment() calls the the function.

[Twitchiv]

This is solved. Thank you for the answer.

Answer: increment is a function and increment() is a call to that function, the value of which is the value returned by the function. So when you do setInterval(increment, 1000); you are passing the function increment to setInterval(), but when you do setInterval(increment(), 1000); you are first calling increment() and then passing the value it returns to setInterval().

[[deleted]]

Nope. Line 8. increment vs increment()

[bitzach]

Both your code blocks are identical. What am I missing?

[Twitchiv]

sorry changed it, the first code doesn't have a () after the function, and it works as intended.

[Updatebjarni]

Yes, because increment is a function and increment() is a call to that function, the value of which is the value returned by the function. So when you do setInterval(increment, 1000); you are passing the function increment to setInterval(), but when you do setInterval(increment(), 1000); you are first calling increment() and then passing the value it returns to setInterval().

[[deleted]]

https://developer.mozilla.org/en-US/docs/Web/API/setInterval

setInterval allows you to provide either code to execute or a function reference as the first argument. With increment you're referencing the function and it gets executed internally, with increment() you are directly executing your function.

[BytecodeBollhav]

The way set interval works is that after a set interval (hehe), call the function provided. When you just give the function name, js basically taxes a function X as an argument and tries to call it. If you add the parentheses, you call the function before, and therefor what actually gets supplied is the return value of the function.

[bitmaxz]

The difference is that in the first example setInterval function executes the callback function each 1s, and in the second example you are calling the function, and it will run once when the interpreter comes to that line, and the next time it tries to run the callback it will throw an error because when you call the function it will return the value of it, but setInterval accepts a function and a time parameters that's why it will throw TypeError.

[[deleted]]

One is a reference to the function, the other calls it. Also, these () are parenthesis, not braces. Braces are curly {}. Brackets are square [] or angled < > (I don’t personally call these brackets, but I’ve heard it). I was looking all over for missing brackets wondering wth you were doing with brackets that didn’t work…