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
This is the well known basic for loop which is having the following format.
for([initialExpression]; [endingCondition]; [incrementalExpression])
// repetitive statements...
Importantly, above expressions which reside inside for are optional. Basically this simple for loop’s repetitive statements will be executed until
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..
for of… loop
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.
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.
Which one? and When?
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 😎