The 'for' loop is one of the basic concepts in all programming languages - it allows you to execute a piece of code multiple times. You use every time you want to do something a set amount of times.
It consists of four parts:
for ([initialization]; [condition]; [final expression])
statement
The initialization is what happens at the beginning of the loop - we assign the value of 0 to the variable i.
The condition is what is checked before each loop iteration - we're checking if the value of i is lower than 50.
The final expression is what happens at the end of each iteration - we increase the value of i by 1.
The statement is the 'body' of the loop - the piece of program that is executed as long as the condition is met. Here, we are only drawing a small rectangle. In most programs, the 'statement' contains multiple instruction (a block of code).
So our loop will be executed fifty times. In the first iteration, the value of i will be 0, then 1, then 2 and so on until 49. One the value of i reaches 50, the 'condition' will not be met (50 is not lower than 50) and the loop will end.
In plain English, our loop tells the computer:
Start with i equal to zero.
If i is lower then 50, draw a rectangle and increase i by one.
Because the y coordinate of the depends on the value of i, each subsequent rectangle is lower than the previous one. In the first iteration, the value of i 0, so the y coordinate is 0. In the second one, i is 1, so y is 5. In the third, i is 2, y is 10. And so on.
Try changing the 'statement' line to:
context.fillRect (i*5, i*5, i, i );
This time, both coordinates depend on the value of i, so the rectangles 'travel' to the bottom-right side of the Canvas.
The width and height are equal to i, so the rectangles get bigger with each iteration.
Now try a loop which draws two rectangles in each statement:
for (let i = 0; i < 50; i++) {
context.fillRect (10, i*5, 4, 4 );
context.fillRect (i*5, i*5, i, i );
}