函数以及何时使用括号/括号

Question

I'm new to javascript and having difficulty understanding why/when to use brackets/parenthesis.

If you have a button called clicker, You can write...

    document.getElementById("clicker").onclick=function(){
        alert("Hi")
    }

function has () but...

       function myFunction(){
        alert("Hi")
    }
    document.getElementById("clicker").onclick=myFunction;

myFunction has no () or it won't work (Makes the alert appear when page loads instead of on click).

Answer 1

myFunction has no ()

Oh yes it does:

function myFunction(){
//                 ^^ right here
    alert("Hi")
}

And you can easily verify that both examples are equivalent by substituting the variable with the function definition:

function myFunction(){
    alert("Hi")
}
document.getElementById("clicker").onclick = myFunction;

// substitute "myFunction"

document.getElementById("clicker").onclick = function myFunction(){
    alert("Hi")
};

// remove function name 

document.getElementById("clicker").onclick = function(){
    alert("Hi")
};

See, we didn't touch any of the () . We were able to convert the second example into the first one by simply substituting a variable with its value.

---

You seem to mix the parenthesis inside a function definition :

function foo() { ... }
            ^^

with the parenthesis used to call a function:

foo();
   ^^

Those are are two different kind of parenthesis and in neither of your examples are you using the second ones (which is correct).

Lets see what would happen if we did the above substitution with myFunction() :

function myFunction(){
    alert("Hi")
}
document.getElementById("clicker").onclick = myFunction();

// substitute "myFunction"

document.getElementById("clicker").onclick = function myFunction(){
    alert("Hi")
}();

// remove function name 

document.getElementById("clicker").onclick = function(){
    alert("Hi")
}();

Notice the dangling () in the last line? This doesn't look like your first example. So you can see that calling the function is not equivalent to defining it.

Answer 2

myFunction()

When you use myFunction() in regular code, it is always a call to execute the function and the parentheses may enclose a set of inputs to the functions arguments.

function myFunction()

When declaring a function the parentheses denote a list of arguments being defined. If they are empty it means there are no arguments.

document.getElementById("clicker").onclick = myFunction;

When you are setting the onclick property of an element it expects a reference to a function. This allows it to use the reference to execute the function later when the actual onclick event is fired. If you include the parentheses it tries to execute the function immediately and then set onclick to the result returned by the function.

<button id="clicker" onclick="myFunction()">Click Me!</button>

Functions in the onclick attribute of an HTML tag include the parentheses because the browser is basically wrapping your function call for you. It's roughly equivalent to the JavaScript below.

document.getElementById("clicker").onclick = function(){ myFunction() };

Where function() is a declaration for an anonymous function.

Functions Eloquent JavaScript is a reference that may help you understand functions better.

Answer 3

In JavaScript, functions are first-class citizens, which in short means that a function can behave like a regular variable.

Consider:

var x = 5; // x holds a reference to 5
foo(x); // Send whatever is inside x to foo, so it may do something with it.

Similarly, we can do this:

// Again, x holds a reference to something
var x = function () {
    console.log("hello");
}
foo(x); // And again, we send that something into foo

In the second example, x and function () {...} are the same. Writing one is the same as writing the other, and just like x in the first example "really is" the number 5, x in the second example "really is" the function.

Now, when we want a function to run, we call it using a reference + parenthesis. Consider these examples, which all do the same:

// foo is the reference to the function, just like x was. 
// and we call it with parenthesis:
function foo () 
{
    console.log("Hello");
}
foo(); // Logs "hello".

// reference to function (still foo) + parenthesis
var foo = function () 
{
    console.log("Hello");
}
foo(); // Logs "Hello"

// Now: A function is called by a reference to a function followed by parenthesis
// So, we can also do this rather nifty thing:
function foo () 
{
    console.log("Hello");
}()
// A reference to a function, followed by parenthesis! 

So the short answer, as others have pointed out is that parentheses are used when declaring a function and calling a function, not when passing around a reference.