console.log()<\/code> one hundred times suddenly felt ridiculous! That’s when I realized how powerful loops really are.<\/p>\n\n\n\nSo if you’re searching for All About Loops in JavaScript: A Comprehensive Guide, you’re in the right place. In this guide, I’ll explain everything in simple language, just like I wish someone had explained it to me when I was learning.<\/p>\n\n\n\n
By the end of this article, you’ll understand:<\/p>\n\n\n\n
\n- \u2705 What loops are<\/li>\n\n\n\n
- \u2705 Why we use loops<\/li>\n\n\n\n
- \u2705 Different types of loops<\/li>\n\n\n\n
- \u2705 When to use each loop<\/li>\n\n\n\n
- \u2705 Real-world examples<\/li>\n\n\n\n
- \u2705 Common mistakes beginners make<\/li>\n\n\n\n
- \u2705 Best practices<\/li>\n<\/ul>\n\n\n\n
Let’s jump in! \ud83d\ude80<\/p>\n\n\n\n
\n\n\n\n\ud83c\udf1f Key Highlights<\/h3>\n\n\n\n\n- \ud83d\udccc Understand what loops are in JavaScript<\/li>\n\n\n\n
- \ud83d\udccc Learn why loops are important<\/li>\n\n\n\n
- \ud83d\udccc Explore every JavaScript loop with examples<\/li>\n\n\n\n
- \ud83d\udccc Understand for, while, do…while, for…of, for…in, and forEach()<\/li>\n\n\n\n
- \ud83d\udccc Learn real-life use cases<\/li>\n\n\n\n
- \ud83d\udccc Avoid common beginner mistakes<\/li>\n\n\n\n
- \ud83d\udccc Follow best practices for writing cleaner code<\/li>\n<\/ul>\n\n\n\n
\n\n\n\n\ud83e\udd14 What Are Loops in JavaScript?<\/h3>\n\n\n\n
A loop is a programming structure that repeats a block of code until a specified condition becomes false.<\/p>\n\n\n\n
Instead of writing the same code again and again, we let JavaScript do the repetitive work.<\/p>\n\n\n\n
Think about brushing your teeth.<\/p>\n\n\n\n
You don’t consciously think:<\/p>\n\n\n\n
\n- Brush…<\/li>\n\n\n\n
- Brush…<\/li>\n\n\n\n
- Brush…<\/li>\n\n\n\n
- Brush…<\/li>\n<\/ul>\n\n\n\n
You simply repeat the same action until you’re done.<\/p>\n\n\n\n
That’s exactly how loops work.<\/p>\n\n\n\n
\n\n\n\n\ud83d\udca1 Why Do We Use Loops?<\/h3>\n\n\n\n
Imagine printing numbers from 1 to 10.<\/p>\n\n\n\n
Without loops:<\/p>\n\n\n\n
console.log(1);\nconsole.log(2);\nconsole.log(3);\n...\nconsole.log(10);<\/code><\/pre>\n\n\n\nNow imagine printing numbers from 1 to 10,000.<\/p>\n\n\n\n
Sounds impossible, right?<\/p>\n\n\n\n
With a loop:<\/p>\n\n\n\n
for(let i=1;i<=10000;i++)\n{\n console.log(i);\n}<\/code><\/pre>\n\n\n\nDone! \ud83d\ude04<\/p>\n\n\n\n
That’s the beauty of loops.<\/p>\n\n\n\n![\"\"](\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/07\/images.png\")
sourceby:Scientech Easy<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n\ud83d\uded2 Real-Life Example<\/h3>\n\n\n\n
Imagine you’re working in a supermarket.<\/p>\n\n\n\n
Every customer comes to the billing counter.<\/p>\n\n\n\n
The cashier repeats the same steps:<\/p>\n\n\n\n
\n- Scan item<\/li>\n\n\n\n
- Display price<\/li>\n\n\n\n
- Add total<\/li>\n\n\n\n
- Print bill<\/li>\n<\/ul>\n\n\n\n
The process stays the same.<\/p>\n\n\n\n
Only the customer changes.<\/p>\n\n\n\n
That’s exactly what a loop does.<\/p>\n\n\n\n![\"\"](\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/07\/loops-1024x576.png\")
<\/figure>\n\n\n\n
\n\n\n\n\ud83d\udd04 Types of Loops in JavaScript<\/h3>\n\n\n\n
JavaScript provides several kinds of loops.<\/p>\n\n\n\n
\n- for loop<\/li>\n\n\n\n
- while loop<\/li>\n\n\n\n
- do…while loop<\/li>\n\n\n\n
- for…of loop<\/li>\n\n\n\n
- for…in loop<\/li>\n\n\n\n
- forEach() method<\/li>\n<\/ul>\n\n\n\n
Let’s understand each one.<\/p>\n\n\n\n![\"\"](\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/07\/Loops-in-JavaScript.jpg\")
source by:Medium<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n1\ufe0f\u20e3 for Loop in JavaScript<\/h3>\n\n\n\n
The for loop is the most commonly used loop.<\/p>\n\n\n\n
I personally use it whenever I know exactly how many times something should repeat.<\/p>\n\n\n\n
Syntax<\/h3>\n\n\n\nfor(initialization; condition; increment)\n{\n \/\/ code\n}<\/code><\/pre>\n\n\n\nExample<\/h3>\n\n\n\nfor(let i=1;i<=5;i++)\n{\n console.log(i);\n}<\/code><\/pre>\n\n\n\nOutput<\/h3>\n\n\n\n1\n2\n3\n4\n5<\/code><\/pre>\n\n\n\nHow it Works<\/h3>\n\n\n\n\n- Initialization happens once.<\/li>\n\n\n\n
- Condition is checked.<\/li>\n\n\n\n
- Code executes.<\/li>\n\n\n\n
- Variable increments.<\/li>\n\n\n\n
- Process repeats.<\/li>\n<\/ul>\n\n\n\n
\n\n\n\n\ud83d\udccd When Should You Use a for Loop?<\/h3>\n\n\n\n
Use it when:<\/p>\n\n\n\n
\n- You know the number of iterations.<\/li>\n\n\n\n
- Counting numbers.<\/li>\n\n\n\n
- Displaying tables.<\/li>\n\n\n\n
- Running calculations.<\/li>\n<\/ul>\n\n\n\n
\n\n\n\n2\ufe0f\u20e3 while Loop in JavaScript<\/h3>\n\n\n\n
The while loop executes as long as a condition remains true.<\/p>\n\n\n\n
Unlike the for loop, we usually don’t know how many times it will run.<\/p>\n\n\n\n
Syntax<\/h3>\n\n\n\nwhile(condition)\n{\n \/\/ code\n}<\/code><\/pre>\n\n\n\nExample<\/h3>\n\n\n\nlet i=1;\n\nwhile(i<=5)\n{\n console.log(i);\n i++;\n}<\/code><\/pre>\n\n\n\n
\n\n\n\n\ud83d\udccd When Should You Use a while Loop?<\/h3>\n\n\n\n![\"\"](\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/07\/When-Should-You-Use-a-while-Loop-1024x832.png\")
sourceby:Reddit<\/figcaption><\/figure>\n\n\n\nI mostly use while loops when:<\/p>\n\n\n\n
\n- Reading user input<\/li>\n\n\n\n
- Waiting for data<\/li>\n\n\n\n
- Running until a condition changes<\/li>\n<\/ul>\n\n\n\n
\n\n\n\n3\ufe0f\u20e3 do…while Loop in JavaScript<\/h3>\n\n\n\n
This loop is a little different.<\/p>\n\n\n\n
It executes at least once, even if the condition is false.<\/p>\n\n\n\n
That surprised me when I first learned it!<\/p>\n\n\n\n
Syntax<\/h3>\n\n\n\ndo\n{\n \/\/ code\n}\nwhile(condition);<\/code><\/pre>\n\n\n\nExample<\/h3>\n\n\n\nlet i=10;\n\ndo\n{\n console.log(i);\n i++;\n}\nwhile(i<=5);<\/code><\/pre>\n\n\n\nOutput<\/h3>\n\n\n\n10<\/code><\/pre>\n\n\n\nEven though the condition is false, the code runs once.<\/p>\n\n\n\n
\n\n\n\n\ud83d\udccd When Should You Use do…while?<\/h3>\n\n\n\n
Use it when you want the code to execute at least once.<\/p>\n\n\n\n
Example:<\/p>\n\n\n\n
\n- ATM menu<\/li>\n\n\n\n
- Login attempts<\/li>\n\n\n\n
- User choices<\/li>\n<\/ul>\n\n\n\n
\n\n\n\n4\ufe0f\u20e3 for…of Loop in JavaScript<\/h3>\n\n\n\n
The for…of loop is mainly used for arrays, strings, and other iterable objects.<\/p>\n\n\n\n
Example<\/h3>\n\n\n\nlet fruits=["Apple","Mango","Orange"];\n\nfor(let fruit of fruits)\n{\n console.log(fruit);\n}<\/code><\/pre>\n\n\n\nOutput<\/h3>\n\n\n\nApple\nMango\nOrange<\/code><\/pre>\n\n\n\nI love using for…of because the syntax feels clean and easy to read.<\/p>\n\n\n\n
\n\n\n\n\ud83d\udccd Use for…of When<\/h3>\n\n\n\n\n- Working with arrays<\/li>\n\n\n\n
- Reading strings<\/li>\n\n\n\n
- Iterating over iterable objects<\/li>\n<\/ul>\n\n\n\n
\n\n\n\n5\ufe0f\u20e3 for…in Loop in JavaScript<\/h3>\n\n\n\n
The for…in loop is used to iterate over the properties (keys) of an object.<\/p>\n\n\n\n
Example<\/h3>\n\n\n\nlet student={\nname:"John",\nage:22,\ncity:"Chennai"\n};\n\nfor(let key in student)\n{\n console.log(key);\n}<\/code><\/pre>\n\n\n\nOutput<\/h3>\n\n\n\n![\"\"](\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/07\/When-Should-You-Use-a-while-Loop-1-915x1024.png\")
source by:Programiz<\/figcaption><\/figure>\n\n\n\nname\nage\ncity<\/code><\/pre>\n\n\n\nYou can also access the values:<\/p>\n\n\n\n
console.log(student[key]);<\/code><\/pre>\n\n\n\n
\n\n\n\n\ud83d\udccd Use for…in When<\/h3>\n\n\n\n\n- Working with objects<\/li>\n\n\n\n
- Reading property names<\/li>\n\n\n\n
- Accessing object data<\/li>\n<\/ul>\n\n\n\n
\n\n\n\n6\ufe0f\u20e3 forEach() Method<\/h3>\n\n\n\n
Although technically forEach() is an array method rather than a loop, you’ll see developers use it constantly.<\/p>\n\n\n\n
Example<\/h3>\n\n\n\nlet numbers=[10,20,30];\n\nnumbers.forEach(function(number)\n{\n console.log(number);\n});<\/code><\/pre>\n\n\n\nOutput<\/h3>\n\n\n\n10\n20\n30<\/code><\/pre>\n\n\n\nI often use forEach() when I simply want to perform an action on every element in an array.<\/p>\n\n\n\n
\n\n\n\n\ud83d\udd25 Difference Between All Loops<\/h3>\n\n\n\n
![\"\"](\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2026\/07\/javascript-event-loop-callstack.png\")