Functions

Often, we need to repeat the same action multiple times in a script, such as summarizing different data entered by users or displaying pop-ups with product descriptions for an online store. Functions are used to avoid code duplication and better structure large programs. They help break down complex programs into smaller and more manageable parts.

Functions in JavaScript can be built-in or user-defined; in other words, they can be explicitly created by the programmer. You have already worked with the built-in function — console.log(). Today, you will learn how to create your own.

Basic syntax

Take a look at the syntax of how we create functions:

function name(parameters) {
   // function body 
}

To create a function, you need to write the function keyword, come up with a name for it, and open parentheses. You can specify the parameters in parentheses: data you want to send to the program. The function code, or the function body, must be written inside the curly brackets.

Based on the pseudo-code above, let's write a function that outputs the following string: Find and book your ideal tour!

function writeMessage() {
   console.log("Find and book your ideal tour!");
}

Our new function has an empty list of parameters and a name writeMessage. Let's try calling this function. You need to write the function name and a pair of parentheses to do this.

function writeMessage() {
   console.log("Find and book your ideal tour!");
}

writeMessage(); // Find and book your ideal tour!

The call of writeMessage() executes the code written in the function body. The function can be called more than once:

function writeMessage() {
   console.log("Find and book your ideal tour!");
}

writeMessage(); // Find and book your ideal tour!
writeMessage(); // Find and book your ideal tour!

Here, we display the message to the console twice. We can display it three, four, or even a hundred times.

The function can be called anywhere in the file. You can call the function both before and after its creation.

writeMessage(); // Find and book your ideal tour!

function writeMessage() {
   console.log("Find and book your ideal tour!");
}

writeMessage(); // Find and book your ideal tour!

The ability to call a function before its creation is due to the peculiarities of JS file processing by browsers: the browser first goes through the whole code, finds all functions, and only then starts executing the code.

Parameters

In the previous examples, we left the parameters unattended: let's get back to that. We can transfer any information inside the function using the parameters. Let's try to pass two arguments to the function: a and b.

function quotient(a, b) {
  console.log(a / b);
}

quotient(10, 5); // 2
quotient(6, 2);  // 3

We called the function by passing the values that were copied into variables a and b, and used in the function body.

Returning a value

In JS, it is possible to return the function result using the return statement:

function multiply(a, b) {
  return a * b;
}

let result = multiply(10, 2);
console.log(result); // 20

The return can be located anywhere in the function's body. Once the code's execution reaches the point of return (pun intended), the function stops, and the value returns to the code called it.

For now, you might doubt that return is worth your while, but bear with it: when you write larger and more complex functions, you will find this helpful operator.

Conclusion

Functions are an essential tool in JavaScript that helps to break down complex programs into smaller and manageable parts. With functions, you can avoid code duplication and improve the structure of your code. In JavaScript, functions can be either built-in or user-defined and can be called anywhere in the file. You can also pass parameters to a function to transfer any necessary information, and you can return a value using the return statement. You can quickly and efficiently write larger and more complex programs by mastering functions.