CODEWITHSUNDEEP
javascriptfunctionparameters
user1159454
user1159454

Reputation: 3317

When do I use () when calling a javascript function

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

  1. When am I actually supposed to use () in calling functions?

  2. 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!

Upvotes: 3

Views: 362

Answers (3)

uadnal
uadnal

Reputation: 11445

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 );
});

Upvotes: 0

Guffa
Guffa

Reputation: 700800

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);

Upvotes: 2

Danilo Valente
Danilo Valente

Reputation: 11352

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

Upvotes: 4

Related Questions