[fusion_builder_container type=”flex” hundred_percent=”no” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” parallax_speed=”0.3″ video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” overlay_color=”” video_preview_image=”” border_color=”” border_style=”solid” padding_top=”” padding_bottom=”” padding_left=”” padding_right=””][fusion_builder_row][fusion_builder_column type=”1_1″ layout=”1_1″ background_position=”left top” background_color=”” border_color=”” border_style=”solid” border_position=”all” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” center_content=”no” last=”true” min_height=”” hover_type=”none” link=”” border_sizes_top=”” border_sizes_bottom=”” border_sizes_left=”” border_sizes_right=”” first=”true”][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]
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:
[/fusion_text][fusion_syntax_highlighter theme=”” language=”html” line_numbers=”” line_wrapping=”” copy_to_clipboard=”” copy_to_clipboard_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” font_size=”” border_size=”” border_color=”” hue=”” saturation=”” lightness=”” alpha=”” border_style=”” background_color=”” line_number_background_color=”” line_number_text_color=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=””]PCAhRE9DVFlQRSBodG1sID4KPGh0bWw+CjxoZWFkPgogICAgPHRpdGxlPlJldHVybiBTdGF0ZW1lbnQgRXhhbXBsZTwvdGl0bGU+CjwvaGVhZD4KPGJvZHk+CiAgICA8IHNjcmlwdCA+CiAgICAgICAgZnVuY3Rpb24gZ2V0TmFtZSgpIHsKICAgICAgICAgICAgcmV0dXJuICJCb2IiOwogICAgICAgIH0KICAgICAgICB2YXIgdXNlck5hbWUgPSBnZXROYW1lKCk7IC8vIFRoZSBmdW5jdGlvbiBpcyBjYWxsZWQgYW5kIHRoZSByZXR1cm4gdmFsdWUgaXMgc3RvcmVkIGluIHVzZXJOYW1lCiAgICAgICAgYWxlcnQodXNlck5hbWUpOyAvLyBQb3BzIHVwIGFuIGFsZXJ0IHdpdGggIkJvYiIKICAgIDwgL3NjcmlwdCA+CjwvYm9keT4KPC9odG1sPgo=[/fusion_syntax_highlighter][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]
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
- Open your text editor and create a new file called
functions.html.
- Add the following HTML structure:
[/fusion_text][fusion_syntax_highlighter theme=”” language=”html” line_numbers=”” line_wrapping=”” copy_to_clipboard=”” copy_to_clipboard_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” font_size=”” border_size=”” border_color=”” hue=”” saturation=”” lightness=”” alpha=”” border_style=”” background_color=”” line_number_background_color=”” line_number_text_color=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=””]PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KICAgIDx0aXRsZT5GdW5jdGlvbnM8L3RpdGxlPgo8L2hlYWQ+Cjxib2R5PgogICAgPCBzY3JpcHQgPgogICAgPCAvc2NyaXB0ID4KPC9ib2R5Pgo8L2h0bWw+Cg==[/fusion_syntax_highlighter][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]
- Inside the
<script> block, create a function called checkAccess that pops up an alert when it is called.
Your code should look like this:
[/fusion_text][fusion_syntax_highlighter theme=”” language=”html” line_numbers=”” line_wrapping=”” copy_to_clipboard=”” copy_to_clipboard_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” font_size=”” border_size=”” border_color=”” hue=”” saturation=”” lightness=”” alpha=”” border_style=”” background_color=”” line_number_background_color=”” line_number_text_color=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=””]PCBzY3JpcHQgPgogICAgZnVuY3Rpb24gY2hlY2tBY2Nlc3MoKSB7CiAgICAgICAgYWxlcnQoIlJlc3RyaWN0ZWQgYWNjZXNzISIpOyAvLyBBbGVydCBwb3BzIHVwIHdoZW4gZnVuY3Rpb24gaXMgY2FsbGVkCiAgICB9CiAgICBjaGVja0FjY2VzcygpOyAvLyBDYWxsIHRoZSBmdW5jdGlvbgo8IC9zY3JpcHQgPgo=[/fusion_syntax_highlighter][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]
- 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
- Now, modify your
checkAccess function to use a return statement instead of the alert. The function should return the message "Expedition team only!".
- Store the return value of the function in a variable.
- Use an
alert to display the value of the variable.
Here’s how your updated code should look:
[/fusion_text][fusion_syntax_highlighter theme=”” language=”html” line_numbers=”” line_wrapping=”” copy_to_clipboard=”” copy_to_clipboard_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” font_size=”” border_size=”” border_color=”” hue=”” saturation=”” lightness=”” alpha=”” border_style=”” background_color=”” line_number_background_color=”” line_number_text_color=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=””]PCBzY3JpcHQgPgogICAgZnVuY3Rpb24gY2hlY2tBY2Nlc3MoKSB7CiAgICAgICAgcmV0dXJuICJFeHBlZGl0aW9uIHRlYW0gb25seSEiOyAvLyBSZXR1cm4gdGhlIG1lc3NhZ2UKICAgIH0KICAgIHZhciB3ZWJQYWdlID0gY2hlY2tBY2Nlc3MoKTsgLy8gU3RvcmUgdGhlIHJldHVybmVkIHZhbHVlIGluIHRoZSB2YXJpYWJsZQogICAgYWxlcnQod2ViUGFnZSk7IC8vIERpc3BsYXkgdGhlIHJldHVybmVkIG1lc3NhZ2UgaW4gYW4gYWxlcnQKPCAvc2NyaXB0ID4K[/fusion_syntax_highlighter][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]
- 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
- Write a function called
greetUser that accepts a user’s name as an argument and returns a greeting, e.g., "Hello, John!".
- 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
- Write a function called
sumNumbers that accepts two numbers as arguments, adds them together, and returns the result.
- Store the result in a variable and display it using an
alert.
Answer Key
Assignment 1: Create a Function that Returns a Greeting
[/fusion_text][fusion_syntax_highlighter theme=”” language=”html” line_numbers=”” line_wrapping=”” copy_to_clipboard=”” copy_to_clipboard_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” font_size=”” border_size=”” border_color=”” hue=”” saturation=”” lightness=”” alpha=”” border_style=”” background_color=”” line_number_background_color=”” line_number_text_color=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=””]PCBzY3JpcHQgPgogICAgZnVuY3Rpb24gZ3JlZXRVc2VyKG5hbWUpIHsKICAgICAgICByZXR1cm4gIkhlbGxvLCAiICsgbmFtZSArICIhIjsKICAgIH0KICAgIHZhciBncmVldGluZyA9IGdyZWV0VXNlcigiSm9obiIpOyAvLyBQYXNzIHRoZSBuYW1lICdKb2huJwogICAgYWxlcnQoZ3JlZXRpbmcpOyAvLyBPdXRwdXQ6ICJIZWxsbywgSm9obiEiCjwgL3NjcmlwdCA+Cg==[/fusion_syntax_highlighter][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]
Assignment 2: Return the Sum of Two Numbers
[/fusion_text][fusion_syntax_highlighter theme=”” language=”html” line_numbers=”” line_wrapping=”” copy_to_clipboard=”” copy_to_clipboard_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” font_size=”” border_size=”” border_color=”” hue=”” saturation=”” lightness=”” alpha=”” border_style=”” background_color=”” line_number_background_color=”” line_number_text_color=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=””]PCBzY3JpcHQgPgogICAgZnVuY3Rpb24gc3VtTnVtYmVycyhhLCBiKSB7CiAgICAgICAgcmV0dXJuIGEgKyBiOyAvLyBSZXR1cm4gdGhlIHN1bSBvZiB0d28gbnVtYmVycwogICAgfQogICAgdmFyIHN1bSA9IHN1bU51bWJlcnMoNSwgMTApOyAvLyBQYXNzIG51bWJlcnMgNSBhbmQgMTAKICAgIGFsZXJ0KHN1bSk7IC8vIE91dHB1dDogMTUKPCAvc2NyaXB0ID4K[/fusion_syntax_highlighter][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]
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!
[/fusion_text][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”50px” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]
Related Videos:
Related Posts:
JavaScript Glossary
Learn about JavaScript ELSE STATEMENTS
What is Python?
Learn about JavaScript IF STATEMENTS
Learn about JavaScript FUNCTIONS
[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]
