<\/p>\n
What loop should I use, why are there so many?<\/p>\n
<\/p>\n
In this article, I am going to give you my view of what loop you should use and why I see them as beneficial and I hope this means you can push on with your work and avoid the deeper conversation until a later stage.<\/p>\n
<\/p>\n
For Loop<\/p>\n
<\/p>\n
We are all familiar with this one, the first loop most tutorials teach us, which is surprising as it’s not the simplest to read but we all know it and I\u2019m willing to bet that if you are starting then this will be your go-to loop.<\/p>\n
Which is fine it does the job perfectly well.<\/p>\n
So for the sake of clarity here is an example:<\/p>\n
<\/p>\n
const arr = [1, 2, 3, 4, 5];<\/p>\n
for (let i=0; i < arr.length; i++) {<\/p>\n
console.log(arr[i])<\/p>\n
}<\/p>\n
<\/p>\n
For loop can iterate in reverse:<\/p>\n
<\/p>\n
for (let i = arr.length – 1; i >= 0; i–) {<\/p>\n
console.log(arr[i])<\/p>\n
}<\/p>\n
<\/p>\n
That said I\u2019ve never needed to iterate over something in reverse! So let’s look at For Of and For In next:<\/p>\n
<\/p>\n
For Of and For In<\/p>\n
<\/p>\n
These loops are the ones you should use as your everyday go-to loops. The key reasons for this are:<\/p>\n
<\/p>\n
Clean and readable syntax You can use \u2018Break\u2019 and \u2018Continue\u2019 like you would in the traditional For Loop. It pretty much loops over anything.<\/p>\n
<\/p>\n
What is the difference between \u2018of\u2019 and \u2018in\u2019?<\/p>\n
<\/p>\n
<\/p>\n
For Of: It loops over the Values<\/p>\n
For In: Loops over the Keys.<\/p>\n
<\/p>\n
const arr = [1,2,3,4,5]<\/p>\n
arr.six = 6;<\/p>\n
arr.seven = 7;<\/p>\n
\/\/This array will now look like [1,2,3,4,5,six:6,seven:7]<\/p>\n
\/\/ OF: iterates over values<\/p>\n
<\/p>\n
for (const value of arr ) {<\/p>\n
console.log(value);<\/p>\n
}<\/p>\n
\/\/ Logs:<\/p>\n
\/\/ 1<\/p>\n
\/\/ 2<\/p>\n
\/\/ 3<\/p>\n
\/\/ 4<\/p>\n
\/\/ 5<\/p>\n
<\/p>\n
\/\/ IN: iterates over keys<\/p>\n
<\/p>\n
for (const key in arr ) {<\/p>\n
console.log(key, arr[key])<\/p>\n
}<\/p>\n
<\/p>\n
\/\/ Logs:<\/p>\n
\/\/ ‘0’ 1<\/p>\n
\/\/ ‘1’ 2<\/p>\n
\/\/ ‘2’ 3<\/p>\n
\/\/ ‘3’ 4<\/p>\n
\/\/ ‘4’ 5<\/p>\n
\/\/ ‘six’ 6<\/p>\n
\/\/ ‘seven’ 7<\/p>\n
<\/p>\n
<\/p>\n
We can also iterate over an array of objects:<\/p>\n
<\/p>\n
const numbers = [{one:1},{two:2},{three:3},{four:4}];<\/p>\n
for (const number of numbers ) {<\/p>\n
console.log(number);<\/p>\n
}<\/p>\n
<\/p>\n
\/\/Logs:<\/p>\n
\/\/ { one: 1 }<\/p>\n
\/\/ { two: 2 }<\/p>\n
\/\/ { three: 3 }<\/p>\n
\/\/ { four: 4 }<\/p>\n
<\/p>\n
And even iterate over a string :<\/p>\n
<\/p>\n
const str = ‘string’;<\/p>\n
for (const letter of str) {<\/p>\n
console.log(letter)<\/p>\n
}<\/p>\n
\/\/Logs:<\/p>\n
\/\/ ‘s’<\/p>\n
\/\/ ‘t’<\/p>\n
\/\/ ‘r’<\/p>\n
\/\/ ‘i’<\/p>\n
\/\/ ‘n’<\/p>\n
\/\/ ‘g’<\/p>\n
<\/p>\n
As mentioned earlier these loops work with \u2018break\u2019 and \u2018continue\u2019 just like the traditional For Loop, which becomes extremely valuable in keeping your code efficient:<\/p>\n
<\/p>\n
for (const letter of string) {<\/p>\n
if(letter === ‘t’) break<\/p>\n
console.log(letter) }<\/p>\n
\/\/ Logs only the first letter ‘s’<\/p>\n
<\/p>\n
<\/p>\n
Errors:<\/p>\n
If you attempt to use for…of with an object that is not iterable, it will throw an error. On the other hand, for…in can still be used to loop over the properties of any object, regardless of whether it is iterable or not.<\/p>\n
<\/p>\n
Performance:<\/p>\n
for…in can be slower than for…of due to the extra steps involved in property enumeration. However, the impact on performance is generally negligible unless you are working with a large number of properties.<\/p>\n
<\/p>\n
As we can see, the benefits stand out without highlighting them further. So what about forEach() why am I switching my allegiance to For Of?<\/p>\n
<\/p>\n
array.forEach()<\/p>\n
The main drawback with forEach() apart from only being of use on arrays, is you can\u2019t stop it. Unlike above where once a condition is met we can enter a \u2018break\u2019 clause and the loop would end, forEach() doesn\u2019t work like that.<\/p>\n
In the case where you may handle 10000+ rows of data, what happens when we find the result in the first few 100 rows?<\/p>\n
Well, nothing we have to sit and wait for the loop to iterate through every row before it finishes.<\/p>\n
It is at this point I begin to understand why this does become a discussion about performance and I begin to understand why people are so vocal on the topic.<\/p>\n
<\/p>\n
\u201cbut couldn’t I just return out of the loop?\u201d Let’s see what happens when we try:<\/p>\n
<\/p>\n
const array = [1,2,3 … 567890];<\/p>\n
array.forEach((num)=> {<\/p>\n
console.log(num)<\/p>\n
}<\/p>\n
\/\/ Logs every number up to 567890<\/p>\n
<\/p>\n
array.forEach((num)=> {<\/p>\n
if(num === 1001) return<\/p>\n
console.log(num)<\/p>\n
}<\/p>\n
\/\/ Logs every number up to 1000, but don’t be fooled<\/p>\n
\/\/It is still going to loop through the remaining entries!<\/p>\n","protected":false},"excerpt":{"rendered":"
What loop should I use, why are there so many? In this article, I am going to give you my view of what loop you should use and why I see them as beneficial and I hope this means you can push on with your work and avoid the deeper conversation until a later stage.<\/p>\n","protected":false},"author":26,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[231,333,334,172,263],"tags":[330],"class_list":["post-4824","post","type-post","status-publish","format-standard","category-article","category-asynchronous-javascript","category-best-practices","category-javascript","category-javascript-frameworks","tag-javascript"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/4824","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/users\/26"}],"replies":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/comments?post=4824"}],"version-history":[{"count":1,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/4824\/revisions"}],"predecessor-version":[{"id":4828,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/4824\/revisions\/4828"}],"wp:attachment":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/media?parent=4824"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/categories?post=4824"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/tags?post=4824"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}