When do I use () when calling a javascript function

Question

So in previous questions I've been told to call/execute/start functions like thisFunc; instead of thisFunc();.

And I've found that sometimes that works and sometimes it doesn't.

<script type='text/javascript'>
var valgo = 0;
var thing = "";
var lastPost = document.getElementById(<? echo $_SESSION['countything']; ?>); 
lastPost.style.opacity = valgo;

function valgogoer(thing){
valgo += .05;
if (lastPost.style.opacity < 1){
lastPost.style.opacity = valgo;
}
}


setInterval(function(){valgogoer(<? echo $_SESSION['countything']; ?>)}, 50);

// Somethings are leftover from when I was messing with it, like the parameter thing.
</script>

In this code (and please tell me if it's awful), because I'm using setInterval to call a function with a parameter, I found through research it must be called the way it is above.

So two questions

When am I actually supposed to use () in calling functions?
In the code above, how can I make it so that it stops executing that function after the opacity hits 1. Currently it's restrained to 1, but it's still being called, and I've got a feeling it's better to stop the function being called, than to have it being called but not doing anything.

Thanks!

Danilo Valente · Accepted Answer · 2012-05-19 00:10:18Z

4

You use the brackets when you want to call the function. But if just wanna pass the content of the function, you do not. Examples:

var a = function(){
    return "I'm a function";
}
var b = a;//Equals to function(){return "I'm a function";}
var c = a();//Equals to "I'm a function"

In event handlers, you do not use the brackets because you have to say to the browser to execute the content of the function. If you put them, the browser will call the return value of the function, which may cause an error:

var a = function(){
    alert("Welcome to my site");
}
window.onload = a();//Wrong, equals to undefined, since the a function doesn't return any value
window.onload = a;//Correct, calls the function a when the event is fired

This same thing happens when you call the setInterval method with a function as the parameter. That's why the brackets are so important

edited May 19, 2012 at 0:10

answered May 19, 2012 at 0:05

Danilo Valente

11.4k8 gold badges55 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1159454 Over a year ago

Ohhh I see. Thanks, so without the brackets it would equal the exact way the function was written....why would you ever want to do that?

user1207456 Over a year ago

Passing a callback is the most common reason. In fact, as shown in his example, you'd want to do that exactly for the onload event callback (whenever the browser fires the onload event, it also executes the function stored in window.onload, if it exsts)

Guffa · Accepted Answer · 2012-05-19 00:15:26Z

You use thisFunc() when you want to call the function. You use thisFunc when you want a reference to the function as a value.

When your function has no parameter, you can use the reference for a callback:

function thisFunc() {
  // do something
}

window.setTimeout(thisFunc, 1000);

When your function has a parameter, you need to wrap it in another function to call it with the parameter value:

function thisFunc(param1) {
  // do something
}

window.setTimeout(function(){ thisFunc(42); }, 1000);

You can of course wrap a parameterless function in a function too:

function thisFunc() {
  // do something
}

window.setTimeout(function(){ thisFunc(); }, 1000);

You don't need to use an anonymous function to wrap a function, you can use a named function and get the reference to that:

function thisFunc(param1) {
  // do something
}

function callFunc() {
  thisFunc(42);
}

window.setTimeout(callFunc, 1000);

uadnal · Accepted Answer · 2012-05-19 00:15:41Z

You use () when you want another function to execute your function

function log(arg) { console.log(arg); }

setTimeout(log, 1000) // Logs undefined after 1 second


log("hi"); // logs the String hi

The function is reusable so you could actually use it yourself

function logUsingTheLogMethod( callback ) {
    if ( typeof callback === "function" ) {
        callback( "This will log to the console!" );
        callback( log === callback ); // Logs true
    }
}
logUsingTheLogMethod( log );

This is a common pattern in JS, to use functions as callbacks in methods

Say you had some functions that did math, but you don't want to write a logging method for all of them.

function add(a,b,fn) {
    if ( fn === log ) {
       fn( a + b );
    }
}
function subtract(a,b,fn) {
    if ( fn === log ) {
       fn( a - b );
    }
}

add(1, 2, log); // logs 3
subtract(5, 4, log) // logs 1

or modify the function so it ensures it's a function instead of the log function and you can do anything with the response

function add(a,b,fn) {
    if ( typeof fn === "function" ) {
       fn( a + b );
    }
}

// answer is automatically passed in by the calling add method
add( a, b, function ( answer ) { 
     // do ssomething with the answer
     alert( answer );
});

Collectives™ on Stack Overflow

When do I use () when calling a javascript function

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related