FAQ: Loops - The While Loop

does anyone else seem to be having the issue of the code not running and the ‘run’ button being frozen in place?

Screenshot 2021-02-27 at 10.34.02

This is indicative that you’re likely stuck in an infinite loop. Try reloading the page to stop the execution of the program, then fix your code to eliminate the infinite loop, and running it again.

the While loop requires a variable set in the global scope. isn’t this promoting a probable unexpected behavior , according to the scope lesson ? What would be a perfect scenario of a while loop over a for loop, or a forEach() method ? Thanks

So I passed this portion of the lesson with the following code:

const cards = [‘diamond’, ‘spade’, ‘heart’, ‘club’];

// Write your code below
let currentCard;
while (currentCard != ‘spade’ ) {
currentCard++;
currentCard = cards[Math.floor(Math.random() * 4)];
console.log(currentCard)
}
why does this code below not work?
const cards = [‘diamond’, ‘spade’, ‘heart’, ‘club’];

// Write your code below

let currentCard;

while (currentCard !=cards[1] ) {

currentCard++;

currentCard = cards[Math.floor(Math.random() * 4)];

console.log(currentCard)

}
trying to call an array position instead of using “spade”

Your second snippet would work the same as the first, but may not pass the SCT for the exercise. The SCT is likely looking for the exact line: while (currentCard != 'spade') {

Side note:
What is the purpose of this line in both snippets?

currentCard++;

Additional aside: Please review How do I format code in my posts?

sorry about not posting the code correctly, that was my first post on here, ever (if I don’t count the riveting discussion I had with the “Robot”. currentCard++; is there cause the example had them, pretty weak excuse, but its only day 3 for me.

No worries. :slightly_smiling_face:

If we add a couple of console.log() statements to your code, we can see what that line is doing:

const cards = ['diamond', 'spade', 'heart', 'club'];

// Write your code below

let currentCard;

while (currentCard !=cards[1] ) {

  
  console.log('currentCard before currentCard++', currentCard); //added for debugging

  currentCard++;

  console.log('currentCard after currentCard++', currentCard); //added for debugging

  currentCard = cards[Math.floor(Math.random() * 4)];

  console.log(currentCard)

}

Output:

currentCard before currentCard++ undefined
currentCard after currentCard++ NaN
club
currentCard before currentCard++ club
currentCard after currentCard++ NaN
club
currentCard before currentCard++ club
currentCard after currentCard++ NaN
heart
currentCard before currentCard++ heart
currentCard after currentCard++ NaN
heart
currentCard before currentCard++ heart
currentCard after currentCard++ NaN
diamond
currentCard before currentCard++ diamond
currentCard after currentCard++ NaN
spade

So that line assigns currentCard to the value NaN. Why? Well, consider what the values involved are.
currentCard is undefined initially, and later assigned to a string. ++ is the increment operator, and is short for value = value + 1. Therefore, we end up with either undefined = undefined + 1 or string = string + 1. Since we can’t add 1 to undefined or to a string mathematically, we get the value NaN (Not a Number). Your code still works since the very next line assigns currentCard to a randomly chosen string element from the cards array, but the line currentCard++ has nothing beneficial to add to the task at hand.

I have a question… In the hint for step 2, it says to use !=

Remember the != operator used for “not”.

Then the code in step 4 uses !==

Add console.log(currentCard) to the correct place in your while loop block.

while (currentCard !== 'spade') { currentCard = cards[Math.floor(Math.random() * 4)]; // On this line, log current card to the console}

Why are they different? What is the difference?

Similar to how == differs from ===. != is the not equal comparison operator. !== is the not strictly equal comparison operator. != will coerce the objects being compared to the same type if possible. !== compares the objects as they are with no type coercion.

3 Likes

Thank you.

Do you know why they are different in the two step hints?

No. I don’t know why the hints are different. Personally I tend more toward using !== unless I have a specific use in mind for !=. The strict comparison requires less work since it simply compares what is on the left to what is on the right with no type coercion. Depending on what you are doing, you may want to use != though. Consider the following:

> "1" != 1 
false
> "1" !== 1
true
> 0 != false
false
> 0 !== false
true
> 1 != true
false
> 1 !== true
true

Hi, any chance you’d be able to explain it because I am getting the same result :slight_smile: Or paste where you found the answer. Thanks

Okay I got it, doesn’t need the iterator currentCard++ :ok_hand:

Why did the lesson force me to use ‘spade’ instead of list calling upon the array value? It refused while (currentCard !== cards[1]) saying I had misspelled something. Just seems inefficient to name spades as a unique string instead of just using what’s already there in the array.

If we poll for the value, ‘spades’ it is not position dependent and can be anywhere in the array. cards[1] is absolute which is more constraint that we would want.

It continues until it has the currentCards ‘Spade’ index. After you have it, the cycle stops.

Index value is increasing in blogs.
If it is synchronized to the ‘spade’ index in the first increase, console.log has to be pressed.
The loop does not work afterwards.

The purpose here is to stop the loop after having the ‘spade’ index already.

We are hungry and we will continue to eat until it is equal to the ‘spade’ index. You can think like that.

I’m in the same, boat I don’t want to progress until I understand why it’s printing 6 random cards, then sometimes 3, then 4 etc. It should just print out 1 from my understanding.

Hello, @icarus45, and welcome to the forums.

If I hand you a deck of cards, and instruct you to draw a card, and then tell you that while the last card you have drawn is not a spade, draw another card, how many cards will you have to draw to get a spade? The answer is unknown until you actually draw a spade. The while loop works the same way. The code inside the loop repeats while the condition is true. The first random selection may be a spade, or it may take several random selections to get a spade.

1 Like

Your analogy makes a lot of sense @midlindner :grinning:
Thanks for the explanation, I understand now

1 Like