106 lines
3.1 KiB
Markdown
106 lines
3.1 KiB
Markdown
---
|
|
id: 5a2efd662fb457916e1fe604
|
|
title: Iterate with JavaScript Do...While Loops
|
|
challengeType: 1
|
|
videoUrl: 'https://scrimba.com/c/cDqWGcp'
|
|
forumTopicId: 301172
|
|
dashedName: iterate-with-javascript-do---while-loops
|
|
---
|
|
|
|
# --description--
|
|
|
|
The next type of loop you will learn is called a `do...while` loop. It is called a `do...while` loop because it will first `do` one pass of the code inside the loop no matter what, and then continue to run the loop `while` the specified condition evaluates to `true`.
|
|
|
|
```js
|
|
const ourArray = [];
|
|
let i = 0;
|
|
|
|
do {
|
|
ourArray.push(i);
|
|
i++;
|
|
} while (i < 5);
|
|
```
|
|
|
|
The example above behaves similar to other types of loops, and the resulting array will look like `[0, 1, 2, 3, 4]`. However, what makes the `do...while` different from other loops is how it behaves when the condition fails on the first check. Let's see this in action. Here is a regular `while` loop that will run the code in the loop as long as `i < 5`:
|
|
|
|
```js
|
|
const ourArray = [];
|
|
let i = 5;
|
|
|
|
while (i < 5) {
|
|
ourArray.push(i);
|
|
i++;
|
|
}
|
|
```
|
|
|
|
In this example, we initialize the value of `ourArray` to an empty array and the value of `i` to 5. When we execute the `while` loop, the condition evaluates to `false` because `i` is not less than 5, so we do not execute the code inside the loop. The result is that `ourArray` will end up with no values added to it, and it will still look like `[]` when all of the code in the example above has completed running. Now, take a look at a `do...while` loop:
|
|
|
|
```js
|
|
const ourArray = [];
|
|
let i = 5;
|
|
|
|
do {
|
|
ourArray.push(i);
|
|
i++;
|
|
} while (i < 5);
|
|
```
|
|
|
|
In this case, we initialize the value of `i` to 5, just like we did with the `while` loop. When we get to the next line, there is no condition to evaluate, so we go to the code inside the curly braces and execute it. We will add a single element to the array and then increment `i` before we get to the condition check. When we finally evaluate the condition `i < 5` on the last line, we see that `i` is now 6, which fails the conditional check, so we exit the loop and are done. At the end of the above example, the value of `ourArray` is `[5]`. Essentially, a `do...while` loop ensures that the code inside the loop will run at least once. Let's try getting a `do...while` loop to work by pushing values to an array.
|
|
|
|
# --instructions--
|
|
|
|
Change the `while` loop in the code to a `do...while` loop so the loop will push only the number `10` to `myArray`, and `i` will be equal to `11` when your code has finished running.
|
|
|
|
# --hints--
|
|
|
|
You should be using a `do...while` loop for this exercise.
|
|
|
|
```js
|
|
assert(code.match(/do/g));
|
|
```
|
|
|
|
`myArray` should equal `[10]`.
|
|
|
|
```js
|
|
assert.deepEqual(myArray, [10]);
|
|
```
|
|
|
|
`i` should equal `11`
|
|
|
|
```js
|
|
assert.equal(i, 11);
|
|
```
|
|
|
|
# --seed--
|
|
|
|
## --after-user-code--
|
|
|
|
```js
|
|
if(typeof myArray !== "undefined"){(function(){return myArray;})();}
|
|
```
|
|
|
|
## --seed-contents--
|
|
|
|
```js
|
|
// Setup
|
|
const myArray = [];
|
|
let i = 10;
|
|
|
|
// Only change code below this line
|
|
while (i < 5) {
|
|
myArray.push(i);
|
|
i++;
|
|
}
|
|
```
|
|
|
|
# --solutions--
|
|
|
|
```js
|
|
const myArray = [];
|
|
let i = 10;
|
|
do {
|
|
myArray.push(i);
|
|
i++;
|
|
} while (i < 5)
|
|
```
|