The conventional for statement is used to iterate over all manner of data structures or conceptual looping scenarios. It includes three expressions, parenthesized and separated by semicolons, and a statement at the end, which is considered the body of the iteration:

for (
  InitializerExpression;
  ConditionExpression;
  UpdateExpression
) IterationBody

The purpose of each part is as follows:

• The InitializerExpression initializes the iteration; this will be evaluated first and only once. This can be any statement (it usually includes a let or var assignment, but doesn't need to).
• The ConditionExpression checks whether the iteration may continue; this will be evaluated and coerced to a Boolean (as if via Boolean(...)) before each iteration to determine whether the next iteration will occur. This can be any expression, though it is usually used to check whether the current index is less than some upper bound (usually the length of the data structure that you are iterating through).
• The UpdateExpression finalizes each iteration, ready for the next iteration. This will be evaluated at the end of each iteration. This can be any statement though is most idiomatically used to increment or decrement the current index.
• The IterationBody contains the actual iteration logic—the code that will be evaluated on every iteration. This is typically a block but can be a single-line statement.

Using the conventional for statement to loop over an array would look like this:

for (let i = 0; i < array.length; i++) {
  array[i]; // => (Each `array` item)
}

It is preferable to use for...of if you're just iterating over a regular array or iterable structure. However, if you need to iterate over a structure indexed unconventionally, then it may be appropriate to use the conventional for loop.

An example of an unconventionally indexed structure is the pixel data of a <canvas> element, which forms an array containing the RGBA (Red, Green, Blue, and Alpha) values of every pixel consecutively, like so:

[r, g, b, a, r, g, b, a, ...]

Since each individual pixel occupies four elements of the array, we would need to iterate over it four indexes at a time. The conventional for loop is perfectly suited to this:

const pixelData = canvas.getContext('2d').getImageData(0, 0, 100, 100).data;

for (let i = 0; i < pixelData.length; i += 4) {
  let red = pixelData[i];
  let blue = pixelData[i + 1];
  let green = pixelData[i + 2];
  let alpha = pixelData[i + 3];
  // (do something with RGBA)
}

The conventional for statement is a well understood and idiomatic piece of syntax. It is best to ensure that you use each of its parts for its purpose. It is entirely possible (though unadvisable) to exploit its syntax by including the actual logic of your iteration in the parenthesized portion of the construct, but this and other misuses can be quite hard to parse for humans:

var copy = [];
for (
  let i = 0;
  i < array.length;
  copy[i] = array[i++]
); 

UpdateExpression here includes the copy[i] = array[i++] expression, which will copy across the element of the array at the current index and will then increment the index. The postfix ++ operator ensures that the previous value of its operand will be returned, guaranteeing that the index accessed on copy[i] is always equal to array[i++]. This is a clever but rather obscure syntax. It would have been far clearer to use the idiomatic for structure, which places the iteration logic in its own statement after for(...):

for (
  let i = 0;
  i < array.length;
  i++
) {
  copy[i] = array[i];
}

This is a more familiar and comprehensible piece of code for most programmers. It is more verbose, and perhaps not as fun to write, but in the end, as explored in the initial chapters of this book, we are most interested in writing code that communicates its intent clearly.