CODEWITHSUNDEEP
javascripthtml
Ashish
Ashish

Reputation: 14707

What is the difference between two method of calling javascript method

I am learning JavaScript and trying to understand it. It may be very simple for you but I do need the explanation. So here is my code of java script file.

function divClick(){
alert("Hello World!!!");
}

So if I Call it like this

$(document).ready(function(){
$("div").click(function(){
    divClick();
});});

Everything is working fine and alert box is appearing only when I click on div element. but If I access it like 

$(document).ready(function(){
$("div").click(divClick());});

The alert box is appearing automatically as soon as page load. I am really not able to understand that, Could you please explain it. If there is any url I would be happy to learn it.

Upvotes: 0

Views: 72

Answers (4)

osdamv
osdamv

Reputation: 3583

Complementing the answer of Felix Kling you can change 

$(document).ready(function(){
   $("div").click(divClick());
});

for

$(document).ready(function(){
   $("div").click(divClick);
});

in that way you are passing a function object called "divClick" instead of the return value of "divClick()" in this case is nothing.

Other dirty form to work would be change the function for something like this

function divClick(){
   return function(){ 
      alert("Hello World!!!");
   }
}

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816404

Like in many programming languages (Python, Java, C, C++, etc), when you have a function call like

foo(a, b, ...);

all the expressions a, b, etc. are evaluated first and then their result is passed to foo as arguments.

In case of 

$("div").click(function(){
    divClick();
});

the expression, is function(){ divClick(); }, which is a function expression. The result of evaluating it is a function (object). Hence a function is passed to .click.

In the case of 

$("div").click(divClick());

the expression is divClick(), which is a function call. That means the function divClick is executed and whatever it returns is passed to .click.

Simplified example:

function a(arg) {
    alert(arg);
}

function b() {
    return 42;
}

a(b()); // alerts 42

Here b is executed first, its return value is 42. This value is passed as argument to a and accessible within the function as arg.

If there is any url I would be happy to learn it.

There really isn't anything special about it. It's how function calls are evaluated. Maybe you get confused by the function which is passed as argument. In JavaScript, functions are first-class citizens and can be passed around like any other value (numbers, booleans, strings, ...).

Reading material about functions:

Upvotes: 5

devang
devang

Reputation: 5516

When you register an event, in this case click, the input is a reference to the function that should be invoked when the event happens. In the first case you are defining an anonymous function. However, in the second case, the divClick() is not the reference, so it evaluates and expects the function divClick to return a reference. During evaluation, your method actually gets invoked and hence the behavior.

Upvotes: 0

zerkms
zerkms

Reputation: 254916

The second immediately calls divClick() and passes what it returns as a .click() callback handler.

Use this instead:

$("div").click(divClick);

here we're passing a reference to a function as an event handler.

Upvotes: 2

Related Questions