Friday , 17 November 2017
Home / Programming / JavaScript / Parameters and Returns – JavaScript Tutorial
Parameters and Returns
Parameters and Returns

Parameters and Returns – JavaScript Tutorial

This tutorial is part of the JavaScript tutorial series for beginners. To view the whole list of tutorials available and the order in which you should follow them, then click here.

Today, we’ll be discussing what parameters and returns are. You’ll learn how to make your functions more robust and flexible by learning these 2 simple concepts.

Before we begin, get rid of your button as we won’t need it anymore. Clear out your script as well.

Using Function Parameters

Parameters allow you to pass in more information to your function. By passing in this information, your function can then use it. The parenthesis is the place where you’ll input your parameters. For example, let’s say we wanted to grab the sum of 2 numbers. Instead of hard coding the 2 numbers, wouldn’t it be better to be able to pass in any 2 numbers? With parameters, it’s possible to do this. Let’s see how this is done.

In your script, add this bit of code.

Inside the parenthesis, you can define as many parameters as you want. For our function, we only have to define 2. To separate, each parameter, you use a comma. You must give each parameter a variable name. This name will be used when you want to access that parameter’s value.  You don’t have to use the keyword var or give each parameter a value. JavaScript automatically assumes that anyone who calls this function will be pass in values for this function.

Inside our function, we simply create a new variable called total and it’s value is equal to the sum of num_one and num_two.

While our function works, it’s useless if we can’t do anything with the information processed. Let’s update our function to this.

Return Keyword

Right after we get the total, we return the total. We use the keyword return to do this.By returning a value, you’re simply sending information back to whoever called it. You can return a message saying the function was unsuccessful or in our case, return processed information by the function.

A couple of things to know before we move on. When you return a value, any code after that will not be executed. You do not have to return a value. The alert function does not return anything. You’re free to return anything at all.

Let’s use our function in action. Right after our function, add this bit of code.

What we’re doing is simple. We create a variable called final_num. It’s value will be equal to the value returned by the addNumbers() function. To call a function, we first type it’s name followed by the parenthesis containing any parameters this function might have. We pass in the numbers 3 and 5. Whenever you call a function with parameters, you must define all parameters. If not, then you’re function will not run.

Lastly, we use the alert function and pass in our final_num variable.Save your work and try loading the page. This should create a pop up with the number 8. You don’t have to use the data returned by the function, but it would be pretty useless if we didn’t use it.

Conclusion

Parameters allow you to add flexibility to your functions. You can process different data instead of repeating the same thing over and over again. You can create functions to tailor to the same situation, but with different data. By returning data instead of just outputting it, you gain the opportunity to store the final result and use it later.

About Jasko Koyn

Check Also

Try-Catch Statement

Try-catch Statement – Advanced JavaScript Tutorial

The try-catch statement is a unique way to handle errors. When errors occur, usually it …

Leave a Reply

Your email address will not be published. Required fields are marked *

ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link