JavaScript Functions

Introduction

In JavaScript, functions are one of the fundamental building blocks. They are reusable blocks of code that you can write once and run many times. Using functions helps you organize your code, make it more readable, and avoid repetition.

In this lab, you will learn the basics of creating and using functions in JavaScript. You will build a simple function that adds two numbers together, and you will learn how to define it, pass it data, get a result back, and display that result.

Define function with function keyword

In this step, you will define your first function. A function is defined using the function keyword, followed by a name, a set of parentheses (), and a block of code (the function body) enclosed in curly braces {}.

First, locate the script.js file in the file explorer on the left side of the WebIDE and open it. We will write all our JavaScript code in this file.

Now, add the following code to script.js to define a function named addNumbers.

function addNumbers() {
  // Code will go here
}

This code creates an empty function. It doesn't do anything yet, but it's a valid function definition. The name addNumbers is how we will refer to this function later.

Add parameters to function definition

In this step, you will add parameters to your function. Parameters are like placeholders for the data that a function will receive when it is called. You define them inside the parentheses () in the function definition, separated by commas.

Let's modify the addNumbers function to accept two numbers that we want to add. We'll name these parameters num1 and num2.

Update your script.js file with the following code.

function addNumbers(num1, num2) {
  // Code will go here
}

Now, the addNumbers function is set up to receive two values. Inside the function, you can use num1 and num2 as variables that hold the values passed to the function.

Return value from function using return

In this step, you will make the function perform an action and send back a result. The return statement is used to specify the value that the function should output. When JavaScript reaches a return statement, the function stops executing and the specified value is returned to where the function was called.

Let's add the logic to our function to sum the two parameters and return the result.

Update your script.js file. Add the return statement inside the function's curly braces.

function addNumbers(num1, num2) {
  return num1 + num2;
}

Now, when the addNumbers function is executed, it will calculate the sum of num1 and num2 and return that value.

Call function with arguments

In this step, you will call the function to execute it. Defining a function doesn't run it. To run the function and get a result, you must "call" or "invoke" it. When you call a function, you provide actual values, called arguments, for the parameters you defined.

The value returned by the function can be stored in a variable for later use.

Add the following lines to your script.js file, below the function definition, to call the addNumbers function with the arguments 5 and 10.

function addNumbers(num1, num2) {
  return num1 + num2;
}

let sum = addNumbers(5, 10);

In this code, addNumbers(5, 10) calls the function. The value 5 is passed to the num1 parameter, and 10 is passed to the num2 parameter. The function returns 15, which is then stored in the sum variable.

Log function result to console

In this final step, you will display the result of your function call. A common way to see the value of variables or the output of code in web development is to use console.log(). This function prints messages to the web browser's developer console.

Add the following line to the end of your script.js file to log the value of the sum variable.

function addNumbers(num1, num2) {
  return num1 + num2;
}

let sum = addNumbers(5, 10);

console.log(sum);

To see the output:

1. Make sure your script.js file is saved.
2. Switch to the Web 8080 tab at the top of the LabEx interface.
3. Open the browser's developer tools. You can usually do this by right-clicking on the page and selecting "Inspect", or by pressing F12.
4. In the developer tools panel, click on the Console tab.

You should see the number 15 printed in the console. This is the result returned by your addNumbers function.

Summary

Congratulations on completing this lab! You have learned the essential concepts of JavaScript functions.

You have successfully:

• Defined a function using the function keyword.
• Added parameters to a function to accept input data.
• Used the return statement to output a value from a function.
• Called a function with arguments to execute its code and stored the result in a variable.
• Used console.log() to view the output in the browser's developer console.

Functions are a core part of writing clean, efficient, and reusable JavaScript code. Keep practicing these concepts to become more comfortable with them.