JavaScript ‘for Loops’

4 min readJan 13, 2019

When preparing for technical interviews, one of the most common tools a programmer will come across for solving a variety of problems is one of the most introductory concepts in JavaScript –– for loops. Loops are extremely helpful when a programmer wants to repeat the same block of code multiple times or when working with or manipulating objects in JavaScript, including arrays and strings. This article will cover three different types of loops, all of which are likely to be used when solving problems in an interview setting: the ‘for’ loop, the ‘for…of’ loop, and the ‘for…in’ loop.

For Loop

The ‘for’ loop takes three expressions: a variable declaration, an expression to be evaluated before each iteration, and an expression to be evaluated after each iteration. It has the following syntax:

Using the syntax above, a basic ‘for’ loop would look something like this:

The first expression declares a variable “i” and sets its initial value to 0; the second expression is evaluated before each iteration and runs the next iteration as long as the condition is met; the third expression is run after each iteration and increments the value of “i” by 1

This code would console.log the value of “i” on each iteration of the for loop, starting with 0 and ending with 4. The loop would then increment “i” to 5, and the condition in the second expression would no longer be true, which would break the loop.

For…Of Loop

The ‘for…of’ statement, which was introduced in ES2015, is used for iterating over iterable collections. The ‘for…of’ loop works well with arrays and strings, both of which are iterable, but does not work with objects. It has the following syntax:

As a basic example, the following code will demonstrate the use of the ‘for…of’ statement on an array:

This loop will iterate over each element in the ‘developers’ array, store that element’s value to a new variable called ‘person’, and then execute the code in the block.

This code will result in a compliment for each person in the ‘developers’ array, as follows:

Everyone likes to be complimented for a job well done!

The ‘for…of’ statement also works well for iterating over each character of a string, including spaces and punctuation.

For…In Loop

The ‘for…in’ statement is used for iterating over ‘enumerable’ properties of an Object. The ‘for…in’ iteration happens in an arbitrary order, so it should not be used if things need to happen in their defined sequence. This method provides the most straightforward way to loop over Object keys and values.

The ‘for…in’ loop can be used on arrays and strings since the key for a value in an array or string will be the index of that value. It is generally not advised to use ‘for…in’ with arrays and strings, however, since it cannot be guaranteed that the iteration will happen in sequence. For this reason, it is preferable to use a ‘for…of’ loop when working with an array or string.

The ‘for…in’ statement uses the following syntax:

As a basic example, here is how the ‘for…in’ statement can be used to retrieve the values of each key in an Object:

Conclusion

Many problems presented in technical interviews (and many situations at any programming role) will involve some form of iteration, so knowing different looping methods and understanding how to implement them will be very beneficial. When looping through ‘enumerable’ properties of an Object, use the ‘for…in’ statement. When looping through an iterable object, like an array or string, opt for the ‘for…of’ statement. When attempting to execute some piece of code multiple times, use a basic ‘for’ loop.

Resources