\n| Runs if false?<\/td>\n | No<\/td>\n | No<\/td>\n | Yes (runs once)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Common Mistakes to Avoid<\/strong><\/p>\n\n- Forgetting to update the counter \u2192 infinite loop<\/li>\n
- Using = instead of == or === in condition<\/li>\n
- Not adding a base case in while or do…while<\/li>\n<\/ul>\n
Best Practices<\/strong><\/p>\n\n- Use for when working with arrays or indexes<\/li>\n
- Use while when looping until a dynamic condition is met<\/li>\n
- Use do…while when you need at least one execution<\/li>\n<\/ul>\n
Break, continue, and nested loops<\/h2>\n1. Break Statement<\/h3>\nThe break statement is used to immediately exit a loop or switch statement.<\/p>\n Example:<\/strong><\/p>\nfor (let i = 1; i <= 5; i++) {<\/em>
\nif (i === 3) break;<\/em>
\nconsole.log(i);<\/em>
\n}<\/em>
\n\/\/ Output: 1, 2<\/em><\/p>\n\n- The loop stops completely when
i === 3<\/code>.<\/li>\n<\/ul>\n2. continue Statement<\/h3>\nThe continue statement is used to skip the current iteration and jump to the next one.<\/p>\n Example:<\/strong><\/p>\nfor (let i = 1; i <= 5; i++) {<\/em>
\nif (i === 3) continue;<\/em>
\nconsole.log(i);<\/em>
\n}<\/em>
\n\/\/ Output: 1, 2, 4, 5<\/em><\/p>\n\n- When i === 3, it skips that iteration but continues looping.<\/li>\n<\/ul>\n
3. Nested Loops<\/h3>\nA loop inside another loop.<\/p>\n Example:<\/strong><\/p>\nfor (let i = 1; i <= 3; i++) {<\/em>
\nfor (let j = 1; j <= 3; j++) {<\/em>
\nconsole.log(`i: ${i}, j: ${j}`);<\/em>
\n}<\/em>
\n}<\/em><\/p>\n\n- The inner loop completes all iterations before the outer loop moves on.<\/li>\n<\/ul>\n
Output:<\/strong><\/p>\ni: 1, j: 1<\/em>
\ni: 1, j: 2<\/em>
\ni: 1, j: 3<\/em>
\ni: 2, j: 1<\/em>
\n…<\/em><\/p>\nUsing break & continue in Nested Loops<\/strong><\/p>\nBreak from Inner Loop Only<\/strong><\/p>\nfor (let i = 1; i <= 3; i++) {<\/em>
\nfor (let j = 1; j <= 3; j++) {<\/em>
\nif (j === 2) break;<\/em>
\nconsole.log(`i: ${i}, j: ${j}`);<\/em>
\n}<\/em>
\n}<\/em><\/p>\nBreak from All Loops (Label)<\/strong><\/p>\nouterLoop: for (let i = 1; i <= 3; i++) {<\/em>
\nfor (let j = 1; j <= 3; j++) {<\/em>
\nif (j === 2) break outerLoop;<\/em>
\nconsole.log(`i: ${i}, j: ${j}`);<\/em>
\n}<\/em>
\n}<\/em><\/p>\nCommon Mistakes:<\/strong><\/p>\n\n- Infinite loops by forgetting to break or increment.<\/li>\n
- Overusing nested loops \u2192 Slow performance.<\/li>\n<\/ul>\n
Looping through arrays and strings<\/h2>\nLooping Through Arrays in JavaScript<\/h3>\nArrays are ordered collections, and there are multiple ways to loop through them.<\/p>\n 1. Using a for Loop<\/strong><\/p>\nTraditional and flexible.<\/p>\n const fruits = [“apple”, “banana”, “cherry”];<\/em><\/p>\nfor (let i = 0; i < fruits.length; i++) {<\/em>
\nconsole.log(fruits[i]);<\/em>
\n}<\/em>
\n\/\/ Output: apple, banana, cherry<\/em><\/p>\n\n- Access each element by its index (i).<\/li>\n<\/ul>\n
2. Using for…of Loop<\/strong><\/p>\nSimpler and cleaner for arrays.<\/p>\n const fruits = [“apple”, “banana”, “cherry”];<\/em><\/p>\nfor (let fruit of fruits) {<\/em>
\nconsole.log(fruit);<\/em>
\n}<\/em>
\n\/\/ Output: apple, banana, cherry<\/em><\/p>\n\n- Directly gives you the value, not the index.<\/li>\n<\/ul>\n
3. Using forEach() Method<\/strong><\/p>\nFunctional style.<\/p>\n const fruits = [“apple”, “banana”, “cherry”];<\/em><\/p>\nfruits.forEach(function(fruit, index) {<\/em>
\nconsole.log(index, fruit);<\/em>
\n});<\/em>
\n\/\/ Output: 0 apple, 1 banana, 2 cherry<\/em><\/p>\nCan also use arrow functions:<\/strong><\/p>\nfruits.forEach((fruit, index) => console.log(index, fruit));<\/em><\/p>\n4. Using map() (if you want a new array)<\/strong><\/p>\nconst upperFruits = fruits.map(fruit => fruit.toUpperCase());<\/em>
\nconsole.log(upperFruits);<\/em>
\n\/\/ Output: [“APPLE”, “BANANA”, “CHERRY”]<\/em><\/p>\n\n- map() is for transforming arrays while looping.<\/li>\n<\/ul>\n
Looping Through Strings in JavaScript<\/h3>\nStrings are like arrays of characters.<\/p>\n 1. Using a for Loop<\/strong><\/p>\nconst str = “hello”;<\/em><\/p>\nfor (let i = 0; i < str.length; i++) {<\/em>
\nconsole.log(str[i]);<\/em>
\n}<\/em>
\n\/\/ Output: h, e, l, l, o<\/em><\/p>\n\n- Access each character by index.<\/li>\n<\/ul>\n
2. Using for…of Loop<\/strong><\/p>\nconst str = “hello”;<\/em><\/p>\nfor (let char of str) {<\/em>
\nconsole.log(char);<\/em>
\n}<\/em>
\n\/\/ Output: h, e, l, l, o<\/em><\/p>\n\n- Very clean and readable.<\/li>\n<\/ul>\n
3. Using split() and forEach()<\/strong><\/p>\nFirst convert string to array.<\/p>\n const str = “hello”;<\/em><\/p>\nstr.split(“”).forEach(char => console.log(char));<\/em>
\n\/\/ Output: h, e, l, l, o<\/em><\/p>\n\n- Useful if you want array methods while looping.<\/li>\n<\/ul>\n
Summary Table:<\/strong><\/p>\n\n\n\n| Loop Type<\/th>\n | Best For<\/th>\n | Notes<\/th>\n<\/tr>\n<\/thead>\n | \n\n| for loop<\/td>\n | Full control (index, value)<\/td>\n | Flexible, a bit longer<\/td>\n<\/tr>\n | \n| for…of loop<\/td>\n | Easy value access<\/td>\n | Cleaner for arrays and strings<\/td>\n<\/tr>\n | \n| forEach()<\/td>\n | Functional iteration<\/td>\n | Cannot break or continue<\/td>\n<\/tr>\n | \n| map()<\/td>\n | Transform and return new array<\/td>\n | Does not modify original array<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Best Practices<\/strong><\/p>\n | |