Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Javascript function arguments explained

Saturday, November 16th, 2013 by Servage

ad

 

Having a function that executes the exact same code throughout your script isn’t likely to be all that useful. We can “pass arguments” (provide data) to native and custom functions in order to apply a function’s logic to different sets of data at different times.

To hold a place for the arguments, add one or more comma-separated variables in the parentheses at the time the function is defined. Then, when we call that function, anything we include between the parentheses will be passed into that variable as the function executes. This might sound a little confusing, but it’s not so bad once you see it in action.

For example, let’s say we wanted to create a very simple function that alerts the number of items contained in an array. We’ve already learned that we can use .length to get the number of items in an array, so we just need a way to pass the array to be measured into our function. We do that by supplying the array to be measured as an argument. In order to do that, we specify a variable name in the parentheses when we define our custom function. That variable will then be available inside of the function and will contain whatever argument we pass when we call the function.

function alertArraySize(arr) {
alert(arr.length);
}

Now any array we specify between the parentheses when we call the function will be passed to the function with the variable name arr. All we need to do is get its length.

var test = [1,2,3,4,5];
alertArraySize(test); // Alerts "5"

Returning a value

This part is particularly wild, and incredibly useful. It’s pretty common to use a function to calculate something and then give you a value that you can use elsewhere in your script. We could accomplish this using what we know now, through clever application of variables, but there’s a much easier way.

The return keyword inside a function effectively turns that function into a variable with a dynamic value! This one is a little easier to show than it is to tell, so bear with me while we consider this example.

function addNumbers(a,b) {
return a + b;
}

We now have a function that accepts two arguments and adds them together. That wouldn’t be much use if the result always lived inside that function, because we wouldn’t be able to use the result anywhere else in our script.

Here we use the return keyword to pass the result out of the function. Now any reference you make to that function gives you the result of the function— just like a variable would.

alert( addNumbers(2,5) ); // Alerts "7"

In a way, the addNumbers function is now a variable that contains a dynamic value: the value of our calculation. If we didn’t return a value inside of our function, the preceding script would alert “undefined”, just like a variable that we haven’t given a value.

The return keyword has one catch. As soon as JavaScript sees that it’s time to return a value, the function ends. Consider the following:

function bar() {
return 3;
alert("We'll never see this alert.");
}

When you call this function using bar(), the alert on the second line never runs. The function ends as soon as it sees it’s time to return a value.

Javascript function arguments explained, 3.7 out of 5 based on 3 ratings
Categories: Guides & Tutorials

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.