How to call a function in JavaScript

So you wrote your first JavaScript function! Nice!

function myFirstFunction() {
 console.log(“Hello World!”);
};

Ok, it’s not the most original function. But it’s a start!

But if you just run the code, nothing is going to happen. You’re not going to see that super important message flash up in the browser.

Because you haven’t called it yet.

Here are a few ways you can call your function:

• In your code
• Immediately
• After an event
• In your HTML
• After an amount of time
• At regular intervals

Call it in your code

The most common way to call a function is within your code. To do this, you will call it by its name.

myFirstFunction();

You might not just call it straight away. You might call it in a loop, or conditionally.

For example, you might only want to say hello if a user is logged in.

// say hello if there is a user
if (user) {
  myFirstFunction();
}

This is probably the most common way to call a function in JavaScript.

Call it immediately

You don’t have to wait until later on to call your function. You might not have conditions, and just want to call it. Call it now!

Good news, you can call it immediately.

An immediately invoked function expression (IIFE) is just a long name for a function you call as soon as you create it.

I didn’t just make that name up.

It’s a long name but it’s pretty accurate.

Here’s how you call the function immediately.

(function () {
 console.log(“Hello World!”);
})();

You can skip giving your function a name, wrap it inside some parentheses (), and call it with some more parentheses () at the end.

This is perfect for a function you just need to call once, and never again. Because the function is anonymous. If you're not going to need the function again, why waste time thinking of a name for it.

Call it after an event

But you don't have to call your function right away.

Maybe you need your function to run after an event, like when someone clicks a button.

To do this, you can listen for a click event, and when it happens, call your function.

const button = document.getElementById("your-button");
button.addEventListener("click", myFirstFunction);

Notice that you don’t call the function when you give it to the event listener. There’s no () after the name. You just give the event listener the name of the function, and it will handle the call later after the event happens.

If you want to call the function yourself, for example, so you can add arguments, you can wrap your function inside another function that you give to the event listener instead.

const button = document.getElementById("your-button");
button.addEventListener("click", function() {
  myFirstFunction();
});

Call it in your HTML

You don’t even need to call your function in your JavaScript. You can call it directly from your HTML if you want to.

For example, let’s say again that you want to call your function with the click of a button. You can call your function from the onclick event.

<button onclick="myFirstFunction()">My Button</button>

This time you do need to add the () to call the function. Because you are giving onclick the code to run when a click event happens on the element.

Call it after a specific amount of time

What if you don't want to execute your function now, but after an amount of time. For example, after 10 seconds.

You can call it in a setTimeout. setTimeout is like a timer in JavaScript. You can give it a function to call, and tell it how many milliseconds to delay the function for.

One second is 1000 milliseconds. If you want it to run after 10 seconds, you can use 10 x 1000 = 10000.

setTimeout(myFirstFunction, 10000);

Call it at regular intervals

Ok, what if you really do want a timer, but not just to run once. Like a stopwatch that records laps, or a save function that runs every minute?

You can call your function from setInterval in JavaScript.

setInterval(myFirstFunction, 1000);

The above code will call your function every second. Again, if you need to pass arguments or whatever to the function you are calling, you can wrap it in a function.

setInterval(function() {
  myFirstFunction("something");
}), 1000);

That's 6 ways you can call a function in JavaScript! Let me know what other ways you use!