Learn more with dummies

Enter your email to join our mailing list for FREE content right to your inbox. Easy!

How to Make Your First JavaScript for Loop

By John Paul Mueller

A for loop is best used in situations where you know you want to perform a specific number of cycles in HTML programming. You don’t necessarily know the number of cycles when you create the application, but the number of cycles is fixed at runtime, when the user interacts with the application.

A for loop can be interrupted or told to bypass a specific cycle. However, you can be certain that a properly constructed for loop always starts at a specific point and ends at a specific point.

There are situations where a function must take a variable number of arguments. You simply don’t know how many arguments the caller will send at the outset. The following example demonstrates one technique for creating a function that handles a variable number of arguments.

function OptionalArgument(param)
  // Determine whether there were any params passed.
  if (arguments.length == 0)
   // Display an error message and exit.
   document.getElementById("Result").innerHTML =
     "Nothing Passed!";
  // Create a string to hold the arguments.
  var Result = new String();
  // Process each of the arguments in turn.
  for (var i = 0; i < arguments.length; i++)
   // Verify that the argument is of the right type.
   if (typeof(arguments[i]) == 'string')
     // Add to the argument string.
     Result += arguments[i] + "<br />";
  // Display the results onscreen.
  document.getElementById("Result").innerHTML = Result;

The code begins by checking the arguments.length property. When this property is 0, it means that the caller hasn’t passed any arguments to the function. The code displays an error message and exits.

The for loop in this example will actually create a string that contains a combination of text and HTML tags in it, so the next step is to create Result as a new String(). After the for loop completes, the application displays the content of Result onscreen.

The for statement begins with three expressions. Each of these expressions is separated by a semicolon (;). The first expression, var i = 0, is the starting point. It creates a variable named i and sets its value to 0. The second expression, i < arguments.length, tells the for loop to continue processing arguments until i is equal to or greater than the value of arguments.length.

In other words, the for loop will perform one cycle for each element in arguments. The third expression, i++, tells the for loop how to update i after completing each cycle. If you didn’t include this expression, the value of i would never change, and the loop would never end.

The code block begins by checking the type of variable contained within the current arguments element, which is expressed as arguments[i]. When this type is a string, the code adds the string, along with an HTML tag, to Result. Each loop cycle adds more strings to Result, and when the for loop ends, Result contains every string passed to the OptionalArgument() function.