JavaScript Recursion Doesn't Resume

Question

This is my script running on Google Chrome Version 58.0.3029.81 (64-bit) (Windows 10 x64)

<script>  
var givenArray = [23, 6, [2, [6, 2, 1, 2], 2], 5, 2];
var printArray = function (start, array) {
    for (i = 0; i < array.length; i++) {
        if (Array.isArray(array[i])) {
            printArray(start + 1, array[i]);
        }
        else {
            for (j = 0; j < start; j++) {
                document.write("&nbsp;&nbsp;&nbsp;&nbsp;");
            }
            document.write(array[i] + '<br/>');
        }
    }
};
printArray(0, givenArray);
</script>

This script should print

23
6
    2
        6
        2
        1
        2
    2
5
2

But it is printing only

23
6
    2
        6
        2
        1
        2

I mean, after the recursive call outer for loop ends or function returns.
What is the problem with this ?

Answer 1

You're using gloabal i and j that are shared by all the printArray calls. Use var to make i and j local:

var printArray = function (start, array) {
    for (var i = 0; i < array.length; i++) {
//       ^^^^ here
        if (Array.isArray(array[i])) {
            printArray(start + 1, array[i]);
        }
        else {
            for (var j = 0; j < start; j++) {
//               ^^^^ and here
                document.write("&nbsp;&nbsp;&nbsp;&nbsp;");
            }
            document.write(array[i] + '<br/>');
        }
    }
};

Never use variables without declaration, unless you want them to be globals.