Need A Lot of Assistance From An Actual js Dev

Looking at your answer, the loop structure itself is pretty good and indexCounter will count from 1 to 100 running the block (between { and } symbols) for each value of indexCounter.

This isn’t a great place to be, when you get stuck like this you do really need to walk away for a bit, take a break and try come back with a fresh mind. Sometimes you will see the answer, other times you might need to ask for help, but continuing on when you feel like this is only going to make it worse. In terms of the actual problem, it is to do with your if/else. A couple of important things about if/else:

  • Only one part (branch) will be evaluated when its matching condition is true. It could be the if, it could be the else or it could be an else if.
  • Each of the possible conditions will be checked from top to bottom to determine which branch to run. Combined with the previous point, this means when multiple conditions are true then only the first branch with a condition which is true is run.
  • Else does not have a condition, it runs in the case that all previous conditions have evaluated to false.

The problem with your version is the sequence of conditions that are checked means the FizzBuzz case can never happen. I’ll leave it as an exercise to work out how to fix this based on the points above, if you are still struggling I can help further.

I haven’t read the book so it is hard to comment much on the way the content is provided. It does feel like there are a couple of things in this solution that for a beginner in chapter 3 are adding some noise / confusion, regardless lets walk through the basic elements of what is going on here and address your questions.

So basically the for loop is a short hand for a common pattern and has become the idiomatic way to express that pattern. You are correct that the author is using n as the index counter, sometimes people frequently use “I” as a short name as well, you are also correct that n++ is a shorthand for n = n + 1. With those things in mind here is a while loop that has exactly the same semantic structure as your for loop here.

let n = 1; // initialise the start of the range before the loop
while (n <= 100) { // check the current value of n before entering the loop body if it is within 1-100
    /// do the stuff
    n++; // increment the counter at the end of the loop body to move to the next number in the range
}

What is happening in the for loop version is the 3 elements used to manage working through the range (the start, the check and the increment) are brought together in the for loop version. This makes the for loop version much easier to see that it is working over a range and what that range is.

The += is another one of those short hands similar to ++. It combines the plus and the assignment together so output = output + "Fizz" and output += "Fizz" are the same. Also + when used on numbers does addition, but when used on strings (like here) joins them together (concatenates).

You seem to roughly understand this correctly. It is really common to see in javascript but is not something I’d personally throw at a beginner. To go a little bit deeper into this, many things in javascript are not true/false but are often “truthy”. If you do a comparison with === or !== then it is strictly comparing true/false values but in most other cases if it has a value then it is interpreted as true and if it does not then it is interpreted as false. In particular, empty strings are considered false, 0 is also considered false, while a string with some letters in it "hello" is considered true and a number other than 0 is also considered true. In addition to this fuzzy version of true and false, javascript also doesn’t care much about types of values and will in many cases try to force the type of a value into one that works. So this output || n thing evaluates to the value of output if the value of output is truthy or the value of n if the value of n is truthy and the value of output is not, otherwise it evaluates to false. The result of evaluating output || n is used as the input to the console log. A clearer way of writing this particular example would be something like:

if (output) {
    console.log(output);
} else {
    console.log(n);
}

Lets go through this authors loop with some comments…

for (let n = 1; n <= 100; n++) // starting at 1, run the block (from { to } ) for each number n up to and including 100
{ 
  // for this particular n
  let output = ""; //  start with an empty output string
  if (n % 3 == 0) output += "Fizz"; // if this n is divisible by 3, join "Fizz" to the output string
  if (n % 5 == 0) output += "Buzz"; // if this n is divisible by 5, join "Buzz" to the output string
  console.log(output || n); // log the output if it isn't empty, log n if the output is empty
}  // move on to the next n

One thing of note beyond your questions here, unlike your version this author is using 2 independent ifs. Your version uses if with else if meaning only the if or else if will be run, but these two ifs will both be checked every time because they do not have else linking them together so they can both run if their conditions both evaluate to true. This means that when n is 15 for example, it can join both Fizz and Buzz to the output string.

You aren’t the only one that feels that way. What is worse is many of the things that create confusion or end up biting you pretty hard were actually intended to make it easier for people to get started with :man_facepalming: It is also worth remembering that it was intended to be easy to add fairly trivial little snippets to web pages and is now being used to build desktop class applications with many millions of lines of code. Along the way some things have improved, but the old things are still there and improvements have to work with them, so even though much of the evolution looks like improvements there is all kinds of hidden spicy bits in there.

3 Likes