|
| 1 | +# JavaScript Loops |
| 2 | + |
| 3 | +- Loops can be complicated, there are `for` loops, `while` loops, and `do...while` loops. |
| 4 | + |
| 5 | +# for Loop |
| 6 | + |
| 7 | +- We will be creating a few mini-projects that will loop through a set of numbers. |
| 8 | + |
| 9 | +- Here is how a for loop structure looks like: |
| 10 | +``` |
| 11 | +for(component 1, component 2, component 3) |
| 12 | +{ |
| 13 | + //code; |
| 14 | +} |
| 15 | +``` |
| 16 | + |
| 17 | +- Let's break [this](https://github.com/ShubhamJagtap2000/JavaScript-Basics/blob/main/09%20Loops/Examples/for-loop.js) code down line by line: |
| 18 | +``` |
| 19 | +for (a = 1; a <= 10; a++) |
| 20 | +{ |
| 21 | + console.log(`Number: ${a}`); // Outputs 1-10 in our console |
| 22 | +} |
| 23 | +``` |
| 24 | + |
| 25 | +- This code takes `a`, our variable, and loops through our specified range `1-10` and ***prints*** this to the console. |
| 26 | + |
| 27 | +- By running this loop, we save our counter, or our range of numbers, to the variable `a`. |
| 28 | + |
| 29 | +- You'll notice that we have `three` statements (or components). Here is a quick list of what each one does: |
| 30 | + |
| 31 | + - The **first** component `a = 1`: Executes ***before*** the loop starts |
| 32 | + - The **second** component `a <= 10`: Defines the ***condition*** for our loop |
| 33 | + - The **third** component `a++`: Executes each time ***after*** the loop starts |
| 34 | + |
| 35 | +- **IMPORTANT:** Each statement **must** be separated by a ***semi-colon***. We can have more than one value within our first statement, but they **must** be separated by ***commas***: |
| 36 | +``` |
| 37 | +for (a = 1, b = 2; component 2; component 3) |
| 38 | +{ |
| 39 | + //code |
| 40 | +} |
| 41 | +``` |
| 42 | +# |
| 43 | + |
| 44 | +# while Loop |
| 45 | + |
| 46 | +- The while loop is similar to the for loop, with a few minor differences: |
| 47 | +``` |
| 48 | +let x = 0; |
| 49 | + |
| 50 | +while (x <= 3) { |
| 51 | + |
| 52 | +console.log(x++); // Prints 0-3 |
| 53 | + |
| 54 | +} |
| 55 | +``` |
| 56 | + |
| 57 | +- [This](https://github.com/ShubhamJagtap2000/JavaScript-Basics/blob/main/09%20Loops/Examples/while-loop.js) code will loop through `x` as long as it is less than or equal to `3`. |
| 58 | + |
| 59 | +- This loop will ***continuing*** running until the desired outcome is met. |
| 60 | +- Loops can be dangerous if the syntax is incorrectly written, then you can easily start an infinite loop, which isn't good for anyone in most cases. To avoid this, make sure that the loop eventually becomes ***false***. |
| 61 | + |
| 62 | +# |
| 63 | + |
| 64 | +# do...while Loop |
| 65 | + |
| 66 | +- The basics of the do...while loop is the code will execute the loop ***before checking*** if the condition is `true`. |
| 67 | + |
| 68 | +[Example](https://github.com/ShubhamJagtap2000/JavaScript-Basics/blob/main/09%20Loops/Examples/do-while-loop.js): |
| 69 | +``` |
| 70 | +let c = 10; |
| 71 | + |
| 72 | +do { |
| 73 | + |
| 74 | +console.log(c++); // Outputs 10-50 |
| 75 | + |
| 76 | +} |
| 77 | +while (c <= 50); |
| 78 | +``` |
| 79 | + |
| 80 | +- This code will `ALWAYS` execute ***at least once***. |
| 81 | + |
| 82 | +- It does this because loops normally require the conditions to be true, but a do...while loop doesn't require this as it executes ***before*** checking if the condition is truthy. |
1 | 83 |
|
0 commit comments