Need Help: I think I'm missing a key concept on how JS variables behave within For Loops

Question

I've been reading Eloquent JS for some time now and I'm still trying to wrap my head around Loops and how they can be used within Functions. So I've been trying to understand the behaviour of loops for some time now and came across an example an example I cant seem to wrap my head around:

Exponent 2^10 (2 to the power of 10)

Code:

var result = 1;
var counter = 0;

for (var counter = 0; counter < 10; counter = counter + 1)
result = result * 2;

console.log(result);

//>1024

It's a very simple for loop, but I cannot for the life of me understand how (2*2*2*2*2*2*2*2*2*2) is made in this loop and, HOW var result and var counter work with each other in this loop.

Am I missing something? How are both variables working with each other? Am I misunderstanding the behaviour of variables in JS?

What I instead see is, 0*2, 2*2, 3*2, 4*2, 5*2, 6*2, 7*2, 8*2, 9*2, 10*2 which tallies up to obviously a wrong answer.

I know it's a very stupid question but I want to understand the code to a fundamental level and I don't want to proceed with functions without fully understanding what I'm looking at.

I hope someone out there can help me. I would very much appreciate it.

Cheers!

Answer 1

The best way to understand for loops(I think) is to think it steps by step.

So first, your computer calculates this:

result = 1 * 2; // counter = 0 

Here, result = 2.

---

Then, this is executed:

result = 2 * 2; // counter = 1

When counter is equal to 0 result is equal to 2, so(when counter = 2) result = 2 * result becomes result = 2 * 2

---

After that, your computer calculates:

result = 2 * 4 // counter = 2

Again, when counter = 1 result is equal to 4, so(when counter = 2) result = 2 * result becomes result = 2 * 4

---

... and so on

Answer 2

The counter starts at zero, and increments by one until it reaches 10, at which point the loop terminates, the code below executes 10 times, on the 0,1,2,3,4,5,6,7,8,9 values and then stops.

The result variable initially has the value of 1.

On iteration:
 0, result is equal to result(1) * 2 = 2
 1, result is equal to result(2) * 2 = 4
 2, result is equal to result(4) * 2 = 8
 3, result is equal to result(8) * 2 = 16
 4, result is equal to result(16) * 2 = 32
 5, result is equal to result(32) * 2 = 64
 6, result is equal to result(64) * 2 = 128
 7, result is equal to result(128) * 2 = 256
 8, result is equal to result(256) * 2 = 512
 9, result is equal to result(512) * 2 = 1024

The result variable is being assigned a new value on each iteration of the loop where that new value is it's previous value * 2. The equation is evaluated first, and the result assigned to the variable.

Answer 3

Okay, let's try formatting the code first and maybe that will make more sense to you.

var result = 1;
var counter = 0;

for (var counter = 0; counter < 10; counter = counter + 1) {
   result = result * 2;
}


console.log(result);

So, lets try to run through this for loop

               Original value(result)       New value(result)
counter = 0         1                              1*2=2
counter = 1         2                              2*2=4
counter = 3         4                              4*2=8
counter = 4         8                              8*2=16
counter = 5         16                             16*2=32
.
.
.
counter = 9         512                            512*2 = 1024

So, if you look at the table above, you will see that the new value of result is used to update result. Hopefully this makes more sense.

Answer 4

The expressions between the brackets are saying three things:

• A: var counter = 0; => start a counter at 0

• B: counter = counter + 1 => each loop, increase the counter with 1

• C: counter < 10; => check: if counter is not smaller that 10 anymore, stop the loop.

This seems to be the most logical way of explaining it. However, you should put the logic in the order A-C-B.