Javascript can be head-scratching at times, especially when working with unfamiliar and unique use-cases of its features. In this article, I plan to demystify invoking functions in javascript.

What are functions?

Functions, in programming context, are "self contained" modules of code that implement certain functionalities or a specific task. The need to perform specific tasks prompts the development of types of functions according to use-case 💁‍♂️. Some function types in JavaScript are mentioned below;

• Asynchronous functions : It often means that a function will have to wait for response(s) outside of its domain to happen before it can be completely executed.
• IIFE (Immediately Invoked Function Expression): Essentially an IIFE function expression, is invoked as soon as the function is declared.
• Event listeners: This function type is triggered, upon the execution of certain events. such as DOM load, etc
• and User-defined functions. etc

According to MDN; Defining a function does not execute it. Defining it simply names the function and specifies what to do when the function is called.

Calling the function actually performs the specified actions with the indicated parameters. For example, if you define the function "uploadImage", you could call it as follows:

uploadImage()

The preceding statement calls the function with no argument . It could thus return a successful or failed operation.

LET's TALK ABOUT FUNCTION INVOCATION

According to MDN, It is common to use the term "call a function" instead of "invoke a function" ... In this tutorial, we will use invoke, because a JavaScript function can be invoked without being called. A function can be invoked in two ways, it either its

• referenced
• called i.e function call Let's see how these can be implemented in code;

const greetings = function() {
 alert("Good Day!");
}
let element = document.querySelector("#btn");
element.onclick = greetings; // reference to the function

Well, the "onclick" property expects a reference to a function, for it to execute when the element is clicked. Normally it's either:

element.onclick = updateState;

or

element.onclick = function () {
    updateState();
};

(but of course, it's best to use addEventListener and attachEvent)

You can also refer to an external "named" function.

This example demonstrates how to execute a function when a user clicks on a <button> element:

document.getElementById("myBtn").addEventListener("click", saySomething);

const saySomething = ()  => {
  document.getElementById("demo").innerHTML = "Hello World";
}

Notice how both of them are references to functions, not calling.

When something expects a reference, you don't call it...you assign a reference to it (first example).

When you want to specifically call a function, you call it with () (second example). But notice how in the second example, there's still a reference to a function that's assigned to onclick method - it's just an anonymous function.

Further explanation: Placing parentheses after a function name or a reference to a function will call that function. To just reference the function without calling it, simply don't use parentheses until you're ready to call it. For example:

const rateMe = function() {
  console.log("4/5")
}

rateMe() // "4/5"

let test = rateMe; // no parentheses () here

test() // use () here. "4/5"

Rule of Thumb

Do you need to function to be executed now?

• Than add the () to execute it

Do you need to function to be referenced so it is called later?

• Do not add the (), parenthesis.