What You Should Know About Loops to Program HTML with JavaScript - dummies

What You Should Know About Loops to Program HTML with JavaScript

By John Paul Mueller

The term loop brings up visions of circles. In some respects, when you create a loop in your JavaScript application, the application goes in circles. It keeps going in circles until you tell it to stop. As it continues to loop, the application performs the tasks that you set for it within the code block defined by the loop structure.

Loops rely on the truth value of expressions. A for statement defines the terms under which the loop will execute. The associated code block contains the code that the for loop executes. The combination of for statement and code block is a for structure, but most developers call this combination a for loop.

Why JavaScript loops are useful

Loops make it possible to perform repetitive tasks easily. There are ways you could re-create the usefulness of a loop, but it would be a painful process. For example, if you knew that you would need to call a function five times, you could place five calls to it in your code.

Of course, the result would be a fragile piece of code that would break every time conditions changed even a little. In some cases, such as a situation where you simply don’t know how many times to repeat a task, you must have a loop to control the number of repetitions that the code makes.

Loops do more than simply repeat a list of tasks. You use loops to control the way in which the repetition occurs. For example, you can choose to end a loop early when an error exists, or you might choose to skip a particular sequence of tasks. In other words, loops are also about controlling a situation by monitoring the data and then reacting to it dynamically.

The ability to end a loop early or to skip a particular loop cycle makes loops uniquely suited to processing arrays and other collections. Because array data changes relatively often in some applications and you can’t really depend on an array to maintain a specific length, you must have some sort of loop processing to manage them successfully.

This need matches the real-world environment that objects model. For example, your bookcase or music collection grows when you buy new items and shrinks when you give items away, sell them, or throw them out. The real world constantly changes and so do your applications, so loops have an incredibly important role to fulfill.

The dangers of loops

Loops can run amok. Yes, like some demented robot on an old science fiction movie, a loop can cause all sorts of problems when managed incorrectly. The most common loop-related problems involve the number of cycles that the loop performs. Processing data is a Goldilocks scenario: You want neither too much nor too little — it has to be just right.

The most common problem for loops is the infinite loop — one that never ends. All loops have two significant expressions associated with them. The first expression defines when the loop should start, and the second expression defines when the loop should stop. Sometimes a developer thinks that the loop has the right logic defined for both, but the stop expression can prove difficult to create for these reasons:

  • The loop never reaches the stopping point because the stop expression is wrong.

  • The loop actually exceeds the stop expression because the stop expression was expecting one result and the loop produced another.

  • An error causes the loop to malfunction.

The easiest loop-related problem to find is one in which the loop never starts. The developer doesn’t see any output, so it’s obvious something is wrong. In many cases, an alert() that shows the starting state of a variable compared to the start expression for the loop quickly shows the problem. When the start condition is never met, the loop will never start.

The hardest and most subtle loop problem is one in which the loop stops too soon. The loop does some amount of work, and it doesn’t get stuck in an infinite loop, but it also doesn’t perform the number of cycles you anticipated. The result is often damaged data. The data may look acceptable, but there’s something wrong with it.

Many applications go into the production environment with subtle loop problems. The worst-case scenario is when the stop expression works sometimes but not in all situations — leading developers to yank out their hair. The next time you see a hairless developer, think about the loop error that the developer was unable to fix.