Can someone help me understand the output of the following code?

Question

I've tried but every time I get a different weird output. Ideally, it should print 0, 1, 2, 3, 4 and come out of the loop but it doesn't happen.

function foo(iteration) {
    if (iteration === 5) {
        return;
    }
    for (let i = 0; i < 5; i++) {
        console.log(i);
        foo(iteration + 1);
    }
}

foo(0);

Answer 1

To understand the current output, start by walking through your function step by step. It helps me to write it out and keep track of the values.

1. iteration starts at 0

2. it starts the for loop

3. i is 0 at this point.

4. its logged to the console.

5. foo is called again with value of 1

6. iteration is still less than 5

7. a new for loop starts. (step 2)

8. i is 0 , this is a brand new loop since it's inside of a new instance of foo

In each iteration of the for loop, you call foo and while iteration is less than 5 you start a new for loop.

Here is an example of a function that does what you like:

 function foo(iteration) { while(iteration < 5) { console.log(iteration) iteration++ } } foo(0)

Answer 2

You don't need to use recursion AND a loop. Just the loop itself will work.

 for (let i = 0; i < 5; i++) { console.log(i); }

Or, just recursion:

 function foo(i) { if (i >= 5) return true; console.log(i); foo(i + 1); } foo(0);

What you're doing is saying: While foo-iteration is less than 5, console.log five times and start up FIVE NEW incremented foo-iterations. Each of those 5 new foo-iterations will console.log five times on their own and start up FIVE NEW incremented foo-iterations, and so on until the foo-iterations finally reach 5. Do you see how this tailspins out of control?

Answer 3

Since you are already using recursion, there is no need to have that loop. Something like this should work:

 function foo(iteration) { if (iteration < 5) { console.log(iteration); foo(iteration + 1); } } foo(0)