Learn about JavaScript return statement

Lesson: Understanding the JavaScript return Statement

In this lesson, we will learn about how functions in JavaScript can return values using the return statement, and how these values can be used within the rest of your code.

Lesson Objectives:

• Understand the concept of the return statement in JavaScript.
• Learn how to create and call functions that return values.
• Apply this knowledge by writing functions that interact with variables and HTML.

1. What is the return Statement?

So far, we’ve been giving our functions pieces of information through arguments. But did you know that functions can also give information back? When a function gives back a value, we say it has returned the information.

To return a value from a function, we use the return statement. The return value can be a string, a number, or even a variable, and it will represent the function’s output.

2. Example: Returning Text from a Function

Here’s an example that shows how the return statement works:

Explanation:

• We created a function named getName that returns the string "Bob".
• The function is called, and its return value ("Bob") is stored in the variable userName.
• When the alert is triggered, it displays "Bob" because that’s the value returned by the function.

3. Functions and Arguments

A function can also take arguments and return different values based on these inputs. However, in this lesson, let’s focus on how to group together actions and how to use the return statement.

Step-by-Step Guide and Activity Assignment

Activity 1: Creating a Simple Function with Return

1. Open your text editor and create a new file called functions.html.
2. Add the following HTML structure:

3. Inside the <script> block, create a function called checkAccess that pops up an alert when it is called.

Your code should look like this:

4. Save the file and open it in your browser. You should see an alert with the message “Restricted access!”.

Activity 2: Adding a return Statement

1. Now, modify your checkAccess function to use a return statement instead of the alert. The function should return the message "Expedition team only!".
2. Store the return value of the function in a variable.
3. Use an alert to display the value of the variable.

Here’s how your updated code should look:

4. Save and run the file in your browser. This time, the alert will pop up with the message "Expedition team only!".

Key Takeaways:

• The return statement allows a function to pass a value back to the code that called it.
• You can store this returned value in a variable and use it elsewhere in your program.

Activity Assignments

Assignment 1: Create a Function that Returns a Greeting

1. Write a function called greetUser that accepts a user’s name as an argument and returns a greeting, e.g., "Hello, John!".
2. Store the result in a variable and display it using an alert.

Hint: Use string concatenation to create the greeting.

Assignment 2: Return the Sum of Two Numbers

1. Write a function called sumNumbers that accepts two numbers as arguments, adds them together, and returns the result.
2. Store the result in a variable and display it using an alert.

Answer Key

Assignment 1: Create a Function that Returns a Greeting

Assignment 2: Return the Sum of Two Numbers

Final Thoughts:

Using the return statement makes your functions more powerful by allowing them to pass information back to the rest of your code. This will come in handy as you continue to write more advanced functions in JavaScript!

Related Videos:

Related Posts:

JavaScript Glossary

Learn about JavaScript ELSE STATEMENTS

What is Python?

Learn about JavaScript IF STATEMENTS

Learn about JavaScript FUNCTIONS