Need A Lot of Assistance From An Actual js Dev

I am new to programming.

I started reading Eloquent Javascript 3rd Edition, as the book comes highly recommended as a good place for beginners to start. Like every book that makes this claim, it seems to not be the case.

I already ran into problems in Chapter 2.

This is the same problem I run into in every language I’ve tried to use in my attempt to learn how to program.

I never quite understand how to properly construct loops. And it seems every dev making a book to help “beginners” always leaves out important details and assumes that the beginner isn’t a beginner, which is understandable, they are developers not teachers and Pedagogy is it’s own field, still, because of the lack of understanding I am stuck.

They explain the concept of a loop just fine, what it does, and why I’d use one but, they always fail to properly explain how to properly create one and the pieces it uses to do what it does, and how those pieces work with whatever interpreter, etc.

Moving on to where I am stuck…

Chapter 2 - Exercise 2 - FizzBuzz
Write a program that uses console.log to print all the numbers from 1 to 100,
with two exceptions. For numbers divisible by 3, print “Fizz” instead of the
number, and for numbers divisible by 5 (and not 3), print “Buzz” instead.
When you have that working, modify your program to print “FizzBuzz”
for numbers that are divisible by both 3 and 5 (and still print “Fizz” or
“Buzz” for numbers divisible by only one of those).

This was my solution for the Chapter 2 - Exercise 2 problem…

/*
for ( let indexCounter = 1; indexCounter <=100; indexCounter++){
  if ( indexCounter % 3 == 0)
    console.log("Fizz");
  else if ( indexCounter % 5 == 0)
    console.log("Buzz");
  else if ( indexCounter % 3 == 0 && indexCounter % 5 == 0)
    console.log("FizzBuzz");
    else ( indexCounter == Number )
  console.log(indexCounter);
}
*/

It works… Kind of… It generates output but, it’s not the correct output after I compared my solution to the author’s. There is a semantic error and I can’t understand why. I am bashing my head against the wall feeling like a total failure in life, and I am, wanting to jump off my roof, and end my existence for being such a failure. For those who might be concerned with my statement, don’t worry, I won’t but, I feel like it.

The author’s solution is here…

/*
for (let n = 1; n <= 100; n++) {
  let output = "";
  if (n % 3 == 0) output += "Fizz";
  if (n % 5 == 0) output += "Buzz";
  console.log(output || n);
}
*/

When I look at the author’s solution… I just can’t understand what it’s doing or even how it’s doing it. I’ve re-read the chapter 3 times now and it’s just not clicking. The way the author explains it does not stick or make sense to me. I am extremely bad with memorization and it seems the author wants me to memorize a ton of stuff.

I understand the for loop and understand that for loops are great for iteration on a set of values and that if I run into a scenario like this I should use a for loop rather than a while loop. In this case the range of 1-100 are the numbers I am iterating over.

for (let n = 1; n <= 100; n++)

One other thing that throws me off is…
Why define the variable inside the for loop? Why not before?
Is this done because of scope? Aka Local variable being safer than a global? Am I even understanding that?
The author uses “let n = 1” which I am assuming acts as an index counter but, I am not sure.
Another thing is how does the JavaScript know that the variable I set, in this case I used indexCounter, that it’s referring to a range if I never defined a range?

I am assuming n++ is just short hand for n = n + 1. Am I correct?

I am so lost, the author creates a variable called output.
Why? Why is the variable empty? How does an empty string and a number generate any sort of output?

Then he does…

if (n % 3 == 0) output += "Fizz";
if (n % 5 == 0) output += "Buzz";

The way I read that is…

If (expression result) * output += “Fizz”?

What is “+=” ?

I have no idea how that works. Output is null/nill, it’s just an empty string.
How does the result of the previous expression and the variable output even do anything with each other as they are two totally different value types? Better yet, how are they even interacting at all?

Then the author uses this line… console.log(output || n);

Console.log( output or n ) is how I read that. I don’t even know if that’s right or even why he did that. Lol. ( Bashes head into desk )

This is all extremely confusing and JavaScript is making me want to claw my eyes out. The syntax of the language is overly complex compared to others I’ve tried in the past and it’s seemingly for no reason. Yet the world at large has decided to make it the face of the web, which is making me question my faith in humanity. What sadistic group of people thought making JavaScript this integral part of the world wide web? I curse them, I curse them all. Lol.