One of the most important tasks of a programmer is to write clean and understandable code. Code that’s easy to change and hard to break. Unfortunately, the more complex the problem that the programmer solves, the more complex the code becomes.

— It’s easy to complicate, but hard to simplify?

— Exactly. But computers are very good at repeating similar actions.

Imagine that you have 3 products in your store and you need to display them all on the screen so that the user can make a choice.

In the simplest case, it would be possible to save them in an array and refer to each of the products by the index (serial number of the product).

const stock = [
  {title: 'fork', price: 10},
  {title: 'spoon', price: 15},
  {title: 'knife', price: 20},
];

const printStock = (stock) => {
  console.log (stock [0]);
  console.log (stock [1]);
  console.log (stock [2]);
}

But in the long run, this approach will fail. When the number of products increases or decreases, it will be necessary to change not only the stock array but also the printStock function.

Besides, there is code duplication in the printStock function, which must be avoided at all costs to keep the code simple and easy to improve.

To perform similar actions more than once we use loops.

While

Let’s start with a simple while loop. Its syntax is somewhat similar to the if statement, but in the case of a loop, the block of code in curly braces will be executed as long as the condition in the parentheses is true.

while (condition) {
  // do something useful
  // ...
}

For example, you can try to display numbers from 0 to 9:

let i = 0;          // create variable i with initial value 0

while (i < 10) {    // while i is less than 10, execute the code in curly braces
  console.log(i);   // print the current value of i
  i++;              // increase i by 1, or else you could write i = i + 1
}

— Wow, it looks like if the task changes and the output must be not up to 9, but up to 99, then I will need to add only one character to the loop condition!

For

— You can also create a loop in JavaScript using the for keyword. Its notation is slightly different, but the essence remains the same - we execute the block of code as long as the condition is true.

for (let i = 0; i < 10; i++) {
  console.log(i);
}

As you can see, we managed to reduce the amount of code since the declaration of the variable i and its increment (i++) are done in the same line with the condition.

But remember that in the for loop, the variable declaration (let i = 0) always comes first, followed by the condition (i < 10), and at the end - the increment (i++). And everything must be separated by the semicolon.

— What happens if I try, instead of increasing the variable i, to decrement it on each iteration of the loop?

— Then you will end up in an endless loop since the exit condition will never be reached. The console.log will not stop until the memory allocated to your program runs out.

However, it is possible to change the initial value of the variable and the condition. Look:

for (let i = 9; i >= 0; i--) {
  console.log(i);
}

We will start iterating (looping through) at 9, and will continue while i is greater than or equal to 0. And i-- means that at the end of each iteration we will decrease the value of the counter i by one.

— Clear.

— Let’s go back to our store product example and improve the printStock function.

const printStock = (stock) => {
  for (let i = 0; i < stock.length; i++) {
    console.log(stock[i]);
  }
}

Note that we start with the first item (index 0) and continue until we have processed all of them - i < stock.length, still incrementing the counter i by one on each iteration (pass) of the loop.

It might seem that the printStock function has become even more complex in comparison with three console.log statements written in a row. But, now, we don’t need to change the printStock if the number of products changes.