JS Basic Functions

JavaScript Basic Functions: How to Write and Invoke

We have actually been calling functions for a while already in this tutorial. Remember prompt(), console.log(), array methods like push(), and sort()? These are all built-in functions.

In JavaScript, functions are a group of statements, variable declarations, loops, and logic that are bundled together into a single, reusable block. Calling a function means an entire group of statements will get executed at once.

First, we are going to have a look at how we can invoke (call) functions, and then we will see how to write basic functions of our own.

Invoking Functions in JavaScript

We can easily recognize functions in code by the parentheses () placed at the end of their names. We invoke (or call) functions like this:

nameOfTheFunction();
functionThatTakesInput("the input", 5, true);

• The first line invokes a function called nameOfTheFunction with no arguments (the parentheses are empty).
• The second line invokes a function called functionThatTakesInput passing three arguments into it.

Let's have a look at what functions look like when we start writing them ourselves.

Writing Your Own Functions

Writing a function in JavaScript is done using the function keyword. Here is the standard template syntax to do so:

function nameOfTheFunction() {
    // content of the function goes here
}

Once defined, the above function can be called anywhere in your code like this: nameOfTheFunction();

Example: A Greeting Function

Let's write a practical function that asks for your name and then greets you. We add a space after the question mark in the prompt to ensure the user starts typing their answer one space away from the question mark.

function sayHello() {
    let you = prompt("What's your name? ");
    console.log("Hello " + you + "!");
}

// Call the function
sayHello();

When the function is called, it will prompt the user, and if you enter "Maaike", the output will be: Hello Maaike!

Functions and Variables: Understanding the Relationship

Take a moment to consider the relationship between functions and variables.

As you have seen, functions can contain variables, which shape how the function operates (like the you variable in the example above). The opposite is also true: variables can contain functions.

Here you can see an example of a variable containing a function (varContainingFunction) and a normal variable existing inside a function (varInFunction):

let varContainingFunction = function() {
    let varInFunction = "I'm in a function.";
    console.log("Hi there! " + varInFunction);
};

// Invoking the function using the variable name
varContainingFunction();

The Core Difference: Variables contain a certain value; they are something. Functions are actions; they do something. JavaScript will not run the statements inside a function until the function gets invoked.

We will return to the idea of storing functions in variables and consider its benefits later in the Anonymous Functions section.

Best Practices for Naming Functions

Giving your function a name might seem like a trivial task, but there are some standard best practices to keep in mind. To keep it short:

• Use camelCase: The first word starts with a lowercase letter, and every subsequent new word starts with a capital letter (e.g., calculateTotalSum). This makes it a lot easier to read and keeps your code consistent.
• Be descriptive: Make sure that the name describes exactly what the function is doing. It's much better to call a number addition function addNumbers than myFunc.
• Use verbs: Make the name an action word. So instead of naming a function hiThere, call it sayHi. Instead of userData, call it fetchUserData.