Difference between Calling a Function and Referring to a Function

Some elementary level learners find difficulty understanding difference between calling a function and referring to a function.

Here in this tutorial, I am going to give a simplified explanation as much as I can.

So now without further ado, let’s dive in.

Calling a function:

Here we have a button and a ‘p’ element.

When we click on the button, an event, onclick, will be triggered. This onclick event will call a function, myDateFunction(). Notice carefully that we wrote the function name, myDateFunction, with parenthesis after it, like so… myDateFunction(). This is how we call a function.

<button onclick="myDateFunction()">Try it</button>

      <p id="demo"></p>

  

This is the function we declared.

      

function myDateFunction() {

            document.getElementById('demo').innerHTML = Date()

}

And now, I’m going to write the same code in a different way.

How about without declaring a function elsewhere we write our executable code directly with the ‘onclick’ event attribute. Like so…

<button onclick="document.getElementById('demo').innerHTML = Date()">Try it</button>

      <p id="demo"></p>

   

It’s working fine, isn’t it?

Did you notice that in the last case we just wrote the executable code which was in the function’s code block; that is between curly braces.

So, what did we learn?

When we call a function, we just execute the code resides within the function’s code block.

Here, HTML event attributes, ‘onclick’ in our case, can take plane JavaScript code, not JavaScript call back functions. So we just call the function we declared elsewhere.

Hope it makes sense.

Referring to a Function:

Here is the HTML markup.

    

<button id="myBtn" >Try it</button>

      <p id="demo"></p>

And here is the JavaScript code.

      

function myDateFunction() {

            document.getElementById('demo').innerHTML = Date()

        }

document.querySelector('#myBtn').onclick = myDateFunction

Look, here we’ve used ‘onclick’ JavaScript property instead of using ‘onclick’ HTML event attribute. And you might have also noticed that we wrote ‘myDateFunction’, no parenthesis used. This means we are referring to a function. So what’s the use of doing such a thing?

Well, then, on second thought I will write the following JavaScript code.

document.querySelector('#myBtn').onclick = function myDateFunction() {

            document.getElementById('demo').innerHTML = Date()

        }

Now, you need to keep in mind that ‘onclick’ property must take a call back function. In this case we can’t write some plane JavaScript code. We need to use a call back function here. That’s why we referred to the myDateFunction function in the previous code.

I think it makes sense to you.

To sum up:

Referring to a function means we write the entire function, not only the code between the code block.

Like so…

onclick = function myDateFunction() {

            document.getElementById('demo').innerHTML = Date()

        }

And calling a function means that we write the executable code resides within the function’s code block.

Like so…

onclick="document.getElementById('demo').innerHTML = Date()"

At this stage, I know, at least two questions are coming to your mind. They are –

1.       When to refer a function and when to call a function?

Well, as I explained in the article, when you need the whole function, you use the reference.

When you need to execute the code between a function block, you call that function.

2.       Where I need a whole function and where need some plain code to be executed?

Hmm, that’s the problem L

Oh, no, just joking :D

Well, here in this article I showed a simple use case.

As an elementary level learner I assume, you need not bother your head about it right now. Just keep learning and practicing. In one fine morning you’ll come up with the idea about where to refer and where to call, I must say.