JavaScript’s for vs for-in vs for-of… in depth

Javascript has several types of “for” loops. here we are going to look each one bit deeper…

Shalitha Suranga

Sep 12 · 3 min read

Image for post

Image credits:

There are several loop statements in Javascript but in most cases everyone tends to use for statements because we usually deal with looping scenarios which consist of known conditions with counters or we just need to iterate through a list of data elements.

Eg:- Making an array of numbers for given start and end.

In this simple example starting and ending is clearly pre-defined also it is related with counters(going from start to end). Let’s look into types of for

This is the well known basic for loop which is having the following format.

Importantly, above expressions which reside inside for are optional. Basically this simple for loop’s repetitive statements will be executed until [endingCondition] returns false (if it is not provided Javascript assumes it as true in order to continue the execution of the loop). consider the following examples that demonstrate several situations of for loop…

This type of for loop will iterate through properties of objects (if a particular property is enumerable). If an Array or String type variable is provided, indexes are taken as keys as usual. let’s check some examples…

Above examples simply iterate through properties of objects. Indeed, we cannot clearly trust the order of the for-in type loop due to some cross-browser issues. Importantly, in order to get a property via for-in loop the specific property should be enumerable. consider the following example for non-enumerable properties..

This is a newly introduced feature with ES6. for-of creates a loop on iterable objects. String, Array, TypedArray, Map and Set can be taken as built-in iterable objects.

See following demo with built-in iterables..

If there is a special requirement custom iterable objects can be defined too. Iterables are just objects but with a special method called Symbol.interator which is known as the default iterator in the iterable protocol concept. Once for-of is executed it calls this default iterator in order to get the iterator object for going through each data element.

The iterator object has next() method which will provide required data and the stopping condition for the for-of loop. Moreover, this special method and data structure are defined in the iterator protocol. I did an experiment on the console as shown below to simulate what will happen with this looping mechanism.

Image for post

An experiment showing how for-of works with the iterator protocol

As you can see next() method returns each data element details of the array and eventually returns value as undefined also with done: true indicating the iteration has been completed.

Each type of for loop is useful in different cases…

  • If counters/indexes are needed while accessing an array or indexes related logical stuff are there it is better to go ahead with for loop.
  • If there is a need to access properties/keys regardless of the order for-in will help.
  • If you just need to iterate through data items of an iterable(also if you need to apply some changes maybe) for-of is an obvious choice.

Personally, I would like to choose for-of most of the time.. and for was selected for some algorithmic things.

Happy coding 😎

About: admin