JavaScript Named Functions: Declaring, Calling, and Getting Values from Functions Explained

Functions consist of a series of statements that have been grouped together because they accomplish a specific task.

There are 3 advantages of using a function -

• If different parts of a program repeat the same task, you can reuse the function (instead of duplicating the same group of statements).

• Grouping together the statements that are required to perform a task helps in structuring and organizing your code.

• Moreover, the statements within a function aren't always executed when your code runs. This makes functions a way to store the necessary steps for completing a task. Your program can then prompt the function to carry out those steps whenever needed. For instance, you might have a task that you want to accomplish only when the user clicks on a specific element on the page.

Declaring a function

To create a function:

• You declare a function using the function keyword.

• You give the function a name followed by parentheses.

• The statements that perform the task sit in a code block (They are inside curly braces)

Calling a function

Once you've declared the function, you can then execute all of the statements between its curly braces with just one line of code. This is called calling the function.

To use the function, you use the function name followed by parentheses.

You can call this function as many times as you want.

Sometimes you see a function called before it has been declared. This is possible because the interpreter runs through the script before executing each statement, so it will know that a function declaration appears later in a script.

But in this article, we will stick with declaring the function before calling it.

Since these functions have a name, so that we can call them later in the code, these are known as named functions.

Flow of a function

Functions can be hard to understand. To make sure you understand functions completely, let’s go through what happens when you declare and use a function again. This time, we’ll take things one step at a time.

Here’s the code we’re dissecting:

First of all, you need to declare a function before you can use it. In the first line, JavaScript sees the function keyword and knows the function is called sayHello. (Step 1)

It skips over the code in the function at this point because the function is not used yet.

Next, JavaScript sees you’re calling the function sayHello. (Step 2)

In the sayHello function, JavaScript will execute all the statements inside the function code block. (Step 3)

When it has finished, it will continue to execute from the point it called the function. (Step 4)

That’s how you read the flow of a function.

Declaring functions that need information

Some functions require information to do a task. For example, a function that calculates the area of a box needs to know its width and height.

If a function needs information to work, you put that information inside the parentheses after the function's name.

The information you put inside these parentheses is called parameters of the function. The parameters are used like variables within the function.

The above function will calculate and return the area of a box. To do this, it needs the box's width and height. Every time you use the function, these values can be different.

This shows how the code can perform a task without knowing the exact details in advance, as long as it has rules it can follow to achieve the task.

Calling Functions that need information

When you use a function with parameters, you provide the values it needs in the parentheses after its name. These values are called arguments, and they can be given as actual values or variables.

Arguments as values

When the below function is called, the number 10 will be used for the width, and 7 will be used for its height.

getArea(10, 7);

Arguments as Variables

You can also use variables instead of directly giving the actual values. So, the following code achieves the same thing

const width = 10;
const height = 7;
getArea(width, height);

Parameters vs Arguments

People often use the terms parameters and arguments interchangeably, but there is a subtle difference.

When we defined the getArea() function, we used width and height inside the parentheses. Inside the curly braces of the function, these words work like variables. These are called parameters.

When we use the getArea() function, we provide actual numbers that will be used for calculations. These values are known as arguments.

Getting a single value out of a function

When you write a function and you expect it to provide you with an answer, the response is known as a return value.

An important thing to remember is that when the return statement is used in a function, the interpreter stops working in that function and goes back to the statement that called it. If there were any other statements after the return inside the function, they wouldn't be executed.

Getting multiple values out of a function

Functions can return more than one value using an array.

function getSize(width, height, depth) {
  let area = width * height;
  let volume = width * height * depth;
  let sizes = [area, volume];
  return sizes;
}

let boxArea = getSize(1, 2, 3)[0];
let boxVolume = getSize(1, 2, 3)[1];

The code above works in the following manner:

• A function named getSize() is defined.

• The function calculates the area of the box and stores it in a variable called area.

• The function calculates the volume of the box and stores it in a variable called volume.

• Both the area and volume values are placed into an array called sizes.

• The sizes array is returned to the code that invoked the getSize() function.

• The boxArea variable captures the first value from the sizes array.

• The boxVolume variable captures the second value from the sizes array.

Indentation

Code within a block (anything within curly braces {}) should be indented to the right. This is an important practice that helps you make code easier to read. It allows you to tell at a glance that return height * width; is part of getArea.

function getArea(height, width) {
  return height * width;
}

You can choose to indent with 2 spaces or with a tab key. Some people prefer spaces, others prefer tabs. Both are fine, as long as you keep it consistent.

Reinforce what you’re learning

Once you've read the article, you understand how things work, but that's not the same as being able to use it by yourself.

My aim isn't just for you to comprehend what's taught in the article, but for you to feel confident using it on your own once you've grasped it.

To help you do that, I've put together exercises. These will assist you in practicing what you've learned and identifying any areas where you might have some gaps in your understanding.

Solve These Exercises