Jump to content

Function call syntax

Recommended Posts

Hey, This seems like a basic question, but I can't find any information on it. (Perhaps my google-fu is weak) When calling a function, what is the difference between "someFunction();" and "someFunction;"? It seems like they should be similar, but they are not interchangeable. Consider the following code:

<!DOCTYPE html><html><head><title>Playing Around...</title><script>  function theMain() {   //Display the current time.   function displayTime() {    var elt = document.getElementById("clock");    var now = new Date();    elt.innerHTML = now.toLocaleTimeString();    setTimeout(displayTime, 1000);   }   //Show some info about the browser.   function showInfo() {    var navi = document.getElementById("navig");    navi.innerHTML = "<b>appName:</b> " + navigator.appName + "<br>"	 + "<b>appVersion:</b> " + navigator.appVersion + "<br>"	 + "<b>userAgent:</b> " + navigator.userAgent + "<br>"	 + "<b>platform:</b> " + navigator.platform + "<br>"	 + "<b>onLine:</b> " + navigator.onLine + "<br>"	 + "<b>geolocation:</b> " + navigator.geolocation;    return;   }   //console.log("theMain");   showInfo();   displayTime();  }  window.onload = theMain; </script><style>  #clock {   font: bold 24pt sans;   background: #ddf;   padding: 10px;   border: solid black 2px;   border-radius: 10px;  }   #navig {   font: 12pt sans;   background: #ddf;   padding: 10px;   border: solid black 2px;   border-radius: 10px;</style></head><body><h1>Clock</h1><span id="clock"></span><h2>Navigator Information</h2><div id="navig"></div></body></html>

There are three functions, and if the outer function is called like "window.onload = theMain;" everything is cool, but if we call it like "window.onload = theMain();" The inner functions fail with and uncaught type error ("can't set innerHTML of null.") Similarly, if the inner functions are called without without parentheses, they fail to execute. I'm sure this is a scope issue, but for the life of me, I can't figure it out. Can anyone shed some light on this? Thanks!

Edited by rclancy
Link to post
Share on other sites

They couldn't be more different. for example

var someFunction(){  console.log('this is the some function being called');} someFunction(); setTimeout(someFunction, 3000);

someFunction() is actually calling the function to make it run. The parenthesis after the name tell it execute immediately. someFunction is just a reference to the function, often used as a callback, in the case of setTimout. You pass the setTimeout a reference to someFunction, and after 3 seconds, it will be called.

Edited by thescientist
Link to post
Share on other sites

Thanks for the reply! Let me see if I understand... The reason "window.onload = someFunction();" fails isn't a scope issue, it fails because the function is called before the document is created and then assigned to "window.onload" which then does it's thing. While "window.onload = someFunction;" doesn't execute the function, it just tells "window.onload" the name of the function to be run once the document is ready.

Link to post
Share on other sites

correct. to clarify on the first point

window.onload = someFunction())

the function is executed, and its return value is assigned to the value of window.onload.

  • Like 1
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...