[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","layouts/app-shell",{"_258":-5,"_9":10},"routes/subjects.$subject.topics.$topic",{"_9":10,"_11":12,"_13":14,"_15":16},"guest",true,"subjectTitle","JavaScript for Beginners","topicTitle","Control Flow and Loops","questions",[17,18,19,20,21,22,23,24,25,26,27,28],{"_29":241,"_31":224,"_33":242,"_35":36,"_37":243,"_39":244,"_41":245},{"_29":223,"_31":224,"_33":225,"_35":36,"_37":226,"_39":227,"_41":228},{"_29":205,"_31":206,"_33":207,"_35":36,"_37":208,"_39":209,"_41":210},{"_29":187,"_31":188,"_33":189,"_35":36,"_37":190,"_39":191,"_41":192},{"_29":169,"_31":170,"_33":171,"_35":36,"_37":172,"_39":173,"_41":174},{"_29":151,"_31":152,"_33":153,"_35":36,"_37":154,"_39":155,"_41":156},{"_29":133,"_31":134,"_33":135,"_35":36,"_37":136,"_39":137,"_41":138},{"_29":115,"_31":116,"_33":117,"_35":36,"_37":118,"_39":119,"_41":120},{"_29":94,"_31":95,"_33":-5,"_35":-5,"_37":96,"_39":97,"_41":98},{"_29":76,"_31":77,"_33":78,"_35":36,"_37":79,"_39":80,"_41":81},{"_29":58,"_31":59,"_33":60,"_35":36,"_37":61,"_39":62,"_41":63},{"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42},"id","cmuo4z37r02gh20jx1auflhck","stem","This has a loop inside a loop. How many lines get printed, and what is the last one?","codeBlock","for (let row = 1; row <= 2; row++) {\n for (let col = 1; col <= 3; col++) {\n console.log(row + '-' + col);\n }\n}","codeLang","js","notes","## Nested loops\n\nA nested loop is a loop inside another loop. The inner loop runs all the way through for **each** run of the outer loop.\n\n```js\nfor (let row = 1; row <= 3; row++) {\n for (let col = 1; col <= 3; col++) {\n console.log(row * col);\n }\n}\n// 3 × 3 = 9 passes in total\n```\n\n- Total runs = outer count × inner count.\n- The inner loop finishes completely for the first outer value, then starts again for the next outer value, and so on — so the very last line logged uses the final values of both counters.","explanation","The inner loop runs in full for each round of the outer loop. The outer loop runs 2 times and the inner loop runs 3 times each, so 2 x 3 = 6 lines. The last round has row 2 and col 3, so it logs '2-3'.","options",[43,44,45,46],{"_29":56,"_48":57,"_33":-5,"_50":51},{"_29":54,"_48":55,"_33":-5,"_50":51},{"_29":52,"_48":53,"_33":-5,"_50":10},{"_29":47,"_48":49,"_33":-5,"_50":51},"cmuo4z37x02gl20jxgwvpgo7d","text","5 lines, and the last one is 2-3","isCorrect",false,"cmuo4z37w02gk20jxnh52dyma","6 lines, and the last one is 2-3","cmuo4z37u02gj20jxvo785675","6 lines, and the last one is 3-2","cmuo4z37t02gi20jx89rq2a6y","3 lines, and the last one is 2-3","cmuo4z37j02gc20jxku3n4x0z","This loop keeps going forever. What is wrong?","let i = 0;\nwhile (i < 3) {\n console.log(i);\n}\ni++;","## Infinite loops\n\nAn infinite loop is one that never stops. It happens when the test never fails.\n\nCommon causes:\n- No step: `while (i < 5) { ... }` with no `i++`.\n\nIf the variable the test checks never changes *inside* the loop's body, the test stays true forever and the loop never stops. Putting the step after the loop instead of inside it has the same effect as leaving it out completely.\n\nHow to avoid them:\n- Each run should move closer to making the test fail.","A loop stops only when its condition becomes false. Here i stays 0, because i++ runs after the loop, which never ends. Move i++ inside the braces so i grows to 3 and the check fails. Always make sure something inside the loop moves it toward the end.",[64,65,66,67],{"_29":74,"_48":75,"_33":-5,"_50":51},{"_29":72,"_48":73,"_33":-5,"_50":10},{"_29":70,"_48":71,"_33":-5,"_50":51},{"_29":68,"_48":69,"_33":-5,"_50":51},"cmuo4z37p02gg20jxp1efw2qt","The check should be i <= 3 instead","cmuo4z37o02gf20jxp424g2r4","A while loop can only stop if you write break inside it","cmuo4z37m02ge20jxti99ds7t","The i++ line sits outside the curly brackets. So i never goes up while looping, and i < 3 is always true","cmuo4z37l02gd20jxocd2pyjk","i should be made with const, not let","cmuo4z37a02g720jxsaovdr6l","What gets printed by this loop?","for (let i = 1; i <= 5; i++) {\n if (i === 2) continue;\n if (i === 4) break;\n console.log(i);\n}","## break and continue\n\n- `break` leaves the nearest loop (or switch) right away.\n- `continue` skips the rest of this run and jumps to the next one.\n\n```js\nfor (const n of [1, 2, 3, 4, 5]) {\n if (n === 2) continue; // skip 2\n if (n === 4) break; // stop at 4\n console.log(n); // 1, 3\n}\n```\n\n`continue` just skips that one value and carries on; `break` stops the loop completely, so nothing after the matching value gets logged.","continue skips the rest of this round and jumps to the next one, so 2 is not logged. break ends the whole loop right away. When i is 4 the loop stops, so 4 and 5 are never logged. That leaves 1 and 3.",[82,83,84,85],{"_29":92,"_48":93,"_33":-5,"_50":10},{"_29":90,"_48":91,"_33":-5,"_50":51},{"_29":88,"_48":89,"_33":-5,"_50":51},{"_29":86,"_48":87,"_33":-5,"_50":51},"cmuo4z37h02gb20jx2umzgxxe","1, 3, 5","cmuo4z37f02ga20jxbe8m3nrh","1","cmuo4z37e02g920jx6rxcnsbv","1, 3, 4","cmuo4z37c02g820jxl95r8khd","1, 3","cmuo4z37202g220jxdxyshwj4","We have const pet = { name: 'Rex', age: 3 };. Which loop prints the words name and then age?","## for...of vs for...in\n\n| Loop | Gives you | Use on |\n| --- | --- | --- |\n| `for...of` | the **values** | arrays, strings, Maps, Sets (anything you can step through) |\n| `for...in` | the **keys** (names), as text | plain objects |\n\n```js\nconst user = { name: \"Ada\", age: 36 };\nfor (const key in user) {\n console.log(key, user[key]); // \"name\" \"Ada\", \"age\" 36\n}\n```\n\n`for...in` goes through an object's key names one at a time, so it logs `\"name\"` first, then `\"age\"`.\n\n- **Watch out: `for...of` on a plain object crashes** with `TypeError: user is not iterable`, so that's not the right tool here.","for...in walks through an object's keys, so it logs 'name' and 'age'. Logging pet[key] would give the values, 'Rex' and 3. for...of only works on things you can step through in order, like arrays and strings. A plain object is not one, so for...of throws a TypeError.",[99,100,101,102],{"_29":112,"_48":113,"_33":114,"_50":51},{"_29":109,"_48":110,"_33":111,"_50":51},{"_29":106,"_48":107,"_33":108,"_50":10},{"_29":103,"_48":104,"_33":105,"_50":51},"cmuo4z37902g620jxati38qsg","A for...in loop that prints pet[key]","for (const key in pet) {\n console.log(pet[key]);\n}","cmuo4z37702g520jxsokghp3m","A for...in loop that prints each key","for (const key in pet) {\n console.log(key);\n}","cmuo4z37502g420jxjp1vu18s","A for...of loop that prints pet[key]","for (const key of pet) {\n console.log(pet[key]);\n}","cmuo4z37402g320jxkzgoqdpb","A for...of loop that prints each key","for (const key of pet) {\n console.log(key);\n}","cmuo4z36v02fx20jxsqrefxsv","This uses for...in on a list. What gets printed?","const nums = [10, 20, 30];\nfor (const i in nums) {\n console.log(i + 1);\n}","**Watch out: `for...in` on an array gives you the positions as text, not numbers.**\n\n```js\nconst nums = [10, 20, 30];\nfor (const i in nums) {\n console.log(i + 1); // \"01\", \"11\", \"21\": string concatenation\n}\n```\n\n- Why: under the hood, an array is an object. Its positions are key names, and key names are always text.\n- This links to a wider rule. `\"2\" + 2` gives `\"22\"`, because `+` with text joins the text. But `\"2\" * 2` gives `4`, because `*` turns both into numbers.\n- For arrays, use `for...of`. If you need the position as a number, use `for (const [i, v] of arr.entries())`.","for...in gives you the keys, not the values. For an array the keys are the positions, but as text: '0', '1', '2'. Adding 1 to text joins them, so '0' + 1 is '01'. To loop over the values of an array, use for...of instead.",[121,122,123,124],{"_29":131,"_48":132,"_33":-5,"_50":51},{"_29":129,"_48":130,"_33":-5,"_50":10},{"_29":127,"_48":128,"_33":-5,"_50":51},{"_29":125,"_48":126,"_33":-5,"_50":51},"cmuo4z37102g120jxo77lzprc","The numbers 1, 2, 3","cmuo4z36z02g020jxgtv6ipd2","The numbers 10, 20, 30","cmuo4z36y02fz20jx3vie6jp8","The text 01, then 11, then 21","cmuo4z36x02fy20jxqnyus8cd","The numbers 11, 21, 31","cmuo4z36o02fs20jxocaqmlm8","This loop should print each colour one time. What does it really print?","const colors = ['red', 'green', 'blue'];\nfor (let i = 0; i <= colors.length; i++) {\n console.log(colors[i]);\n}","### Off-by-one errors: `<` vs `<=`\n\nA list's positions (called indexes) start at `0` and end at `length - 1`. A list of 3 items has positions 0, 1 and 2.\n\n```js\nfor (let i = 0; i <= fruits.length; i++) {\n console.log(fruits[i]); // last pass: fruits[3] → undefined\n}\n```\n\n- Start at `0` → use `i < length`.\n- Quick check: count the runs. `i = 0; i < 3` gives 3 runs (0, 1, 2). Using `i <= length` adds one extra run past the last valid position, which logs `undefined`.","The array has 3 items at positions 0, 1 and 2, and colors.length is 3. With <= the loop also runs when i is 3. There is no item at position 3, so colors[3] is undefined. JavaScript does not throw an error for this. Use i < colors.length to fix it.",[139,140,141,142],{"_29":149,"_48":150,"_33":-5,"_50":51},{"_29":147,"_48":148,"_33":-5,"_50":51},{"_29":145,"_48":146,"_33":-5,"_50":10},{"_29":143,"_48":144,"_33":-5,"_50":51},"cmuo4z36t02fw20jx9bgqcro2","green, blue, and then undefined","cmuo4z36s02fv20jx5zvolah0","red, green, blue, and then undefined","cmuo4z36r02fu20jxnbi06lrc","red, green, blue","cmuo4z36q02ft20jxkxqb7nso","red, green, blue, and then an error for going past the end","cmuo4z36h02fn20jxgbtl8bnz","What gets printed by this do...while loop?","let n = 10;\ndo {\n console.log(n);\n n++;\n} while (n < 5);","## while and do...while\n\n- `while` checks the test **before** each run. If the test fails at the start, the code never runs.\n- `do...while` checks the test **after** each run. So the code **always runs at least once**.\n\n```js\nlet n = 10;\nwhile (n < 5) {\n console.log(\"never runs\");\n}\n\ndo {\n console.log(\"runs once\"); // body first, then check\n} while (n < 5);\n```\n\nEven though `n < 5` is false right away, `do...while` still runs its body once before it checks the test, then stops because the test fails.\n\n- Note the semicolon at the end: `do { } while (cond);`.","A do...while loop runs its body first and checks the condition after. So the body always runs at least once. It logs 10, makes n 11, then checks 11 < 5. That is false, so the loop stops. A plain while loop would log nothing here.",[157,158,159,160],{"_29":167,"_48":168,"_33":-5,"_50":51},{"_29":165,"_48":166,"_33":-5,"_50":51},{"_29":163,"_48":164,"_33":-5,"_50":10},{"_29":161,"_48":162,"_33":-5,"_50":51},"cmuo4z36m02fr20jx15hxe19a","10, 11, 12, and it never stops","cmuo4z36l02fq20jx2n56njar","10","cmuo4z36k02fp20jx0a9sx8n1","Nothing, because 10 is not less than 5","cmuo4z36i02fo20jx7s9xh6m3","5","cmuo4z36a02fi20jxwupq76k7","The first case has no break line. What gets printed?","const fruit = 'apple';\nswitch (fruit) {\n case 'apple':\n console.log('red');\n case 'banana':\n console.log('yellow');\n break;\n default:\n console.log('unknown');\n}","### Fall-through (forgetting break)\n\n**Watch out: if you leave out `break`, the code keeps going into the next case.** It runs that case's code too, without checking if it matches. This is called \"fall-through\".\n\n```js\nconst level = 1;\nswitch (level) {\n case 1:\n console.log(\"one\");\n case 2:\n console.log(\"two\"); // also runs\n default:\n console.log(\"default\"); // also runs\n}\n// one, two, default\n```\n\n- Fall-through is fine on purpose, when empty cases share code.\n- `break` means \"stop here and leave the switch\". Without it, every case below the matching one runs too, until it hits a `break` (or the switch ends).","Once a case matches, switch keeps running every line below it until it hits a break. This is called fall-through. 'apple' matches, logs 'red', then falls into the banana case and logs 'yellow'. The break there stops it before default.",[175,176,177,178],{"_29":185,"_48":186,"_33":-5,"_50":51},{"_29":183,"_48":184,"_33":-5,"_50":10},{"_29":181,"_48":182,"_33":-5,"_50":51},{"_29":179,"_48":180,"_33":-5,"_50":51},"cmuo4z36f02fm20jxplxnsdkj","red","cmuo4z36e02fl20jxnxrbsw45","red, then yellow, then unknown","cmuo4z36d02fk20jxr3ce714n","red, and then yellow","cmuo4z36b02fj20jxu9115471","unknown","cmuo4z36302fd20jxm1d2d3o6","What gets printed by this switch?","const input = '2';\nswitch (input) {\n case 2:\n console.log('number two');\n break;\n default:\n console.log('something else');\n}","### switch uses strict matching\n\n`switch` compares with `===`. So the value and the case must be the same type. Text `\"2\"` does not match the number `2`.\n\n```js\nconst input = \"2\"; // e.g. read from a form, always a string\nswitch (input) {\n case 2:\n console.log(\"two\"); // never runs: \"2\" !== 2\n break;\n default:\n console.log(\"no match\"); // runs\n}\n```\n\nFix: turn it into a number first, with `switch (Number(input))`.","switch compares values with strict equality (===). The text '2' and the number 2 are different types, so they do not match. No case matches, so the default branch runs and logs 'something else'.",[193,194,195,196],{"_29":203,"_48":204,"_33":-5,"_50":51},{"_29":201,"_48":202,"_33":-5,"_50":10},{"_29":199,"_48":200,"_33":-5,"_50":51},{"_29":197,"_48":198,"_33":-5,"_50":51},"cmuo4z36802fh20jxbgz4cpmq","number two, and then something else","cmuo4z36702fg20jx8j5rn4ij","number two","cmuo4z36602ff20jx3fx7vdrr","something else","cmuo4z36402fe20jxcoz1gw1h","Nothing, because no case matches and the default part is skipped","cmuo4z35w02f820jx316luwwo","This if check has no curly brackets { }. What gets printed?","const age = 12;\nif (age >= 18)\n console.log('Adult');\n console.log('Can vote');","## Blocks and braces\n\n- A **block** is code between curly braces `{ }`. It groups lines together.\n- You can skip the braces if there is only one line. Don't. It leads to bugs.\n\n```js\nif (loggedIn)\n showDashboard();\n trackVisit(); // NOT part of the if: always runs\n```\n\nOnly the one line right after the condition belongs to the `if`. The next line is a separate statement that always runs, no matter what the condition was.\n\n- Always use braces, even for one line.","Without braces, an if controls only the one statement right after it. Indentation means nothing to JavaScript. So only the 'Adult' line is skipped, and 'Can vote' always runs. Always use braces { } to group lines into a block.",[211,212,213,214],{"_29":221,"_48":222,"_33":-5,"_50":51},{"_29":219,"_48":220,"_33":-5,"_50":51},{"_29":217,"_48":218,"_33":-5,"_50":51},{"_29":215,"_48":216,"_33":-5,"_50":10},"cmuo4z36102fc20jxpzkh2oms","Can vote","cmuo4z36002fb20jxry4hr9xz","Nothing, because both pushed-in lines are part of the if","cmuo4z35z02fa20jx8ack440p","Adult, and then Can vote","cmuo4z35x02f920jx3z170jfp","An error, because an if must always have curly brackets","cmuo4z35m02f320jx9kaap79z","When this code runs, what gets printed?","const score = 85;\nif (score > 50) {\n console.log('Pass');\n} else if (score > 80) {\n console.log('Merit');\n} else {\n console.log('Fail');\n}","## if, else if, else\n\n- `if` runs its code when the test is true (or \"truthy\").\n- `else if` tries a second test. It is only checked if every test above it failed.\n- `else` runs when no test passed.\n- JavaScript checks the tests from top to bottom. Only the first one that passes runs.\n\n```js\nconst score = 72;\n\nif (score >= 90) {\n console.log(\"A\");\n} else if (score >= 70) {\n console.log(\"C or better\"); // runs; later branches are skipped\n} else {\n console.log(\"Below C\");\n}\n```\n\nEven if a later `else if` test would also pass, it never gets checked once an earlier one has already matched.","JavaScript checks the conditions from top to bottom and runs only the first one that is true. 85 > 50 is true, so it logs 'Pass' and skips the rest, even though 85 > 80 is also true. Put the narrowest check (score > 80) first if you want 'Merit'.",[229,230,231,232],{"_29":239,"_48":240,"_33":-5,"_50":10},{"_29":237,"_48":238,"_33":-5,"_50":51},{"_29":235,"_48":236,"_33":-5,"_50":51},{"_29":233,"_48":234,"_33":-5,"_50":51},"cmuo4z35u02f720jx0m65hc3j","Fail","cmuo4z35s02f620jxbmzctlul","Pass, and then Merit","cmuo4z35r02f520jx2lkhosir","Merit","cmuo4z35o02f420jx6kchkxan","Pass","cmuo4z35f02ey20jx5xs6bf43","const list = [];\nif (list) {\n console.log('has items');\n} else {\n console.log('empty');\n}","## Truthy and falsy values\n\nThe test in an `if` does not have to be `true` or `false`. JavaScript turns any value into true or false for you.\n\n- **Falsy** means \"counts as false\". There are just eight: `false`, `0`, `-0`, `0n`, `\"\"` (empty text), `null`, `undefined`, `NaN`.\n- **Truthy** means \"counts as true\". That is every other value. This includes `\"0\"`, `\"false\"`, `\" \"` (a space), `[]` (empty list) and `{}` (empty object).\n\n```js\nconst items = [];\nif (items) console.log(\"runs: an empty array is truthy\");\nif (items.length) console.log(\"skipped: 0 is falsy\");\n```\n\nAn empty list `[]` is not one of the eight falsy values, so `if (items)` counts as true and runs.","An if checks whether a value is truthy, meaning it acts like true. Every array is truthy, even an empty one. So the first branch runs and logs 'has items'. To check for an empty array, test list.length instead, because 0 is falsy.",[246,247,248,249],{"_29":256,"_48":257,"_33":-5,"_50":51},{"_29":254,"_48":255,"_33":-5,"_50":51},{"_29":252,"_48":253,"_33":-5,"_50":10},{"_29":250,"_48":251,"_33":-5,"_50":51},"cmuo4z35l02f220jxm9jnnooa","empty","cmuo4z35k02f120jx7r4blo1o","has items","cmuo4z35i02f020jx1xe3r8y3","Nothing is printed, because an empty list counts as neither true nor false","cmuo4z35h02ez20jxdpocasp0","An error, because you cannot put a list inside an if check","email"]