Array of variable length array in JavaScript

Question

I'm building small web page to solve the famous Hanoi towers problem. All is fine, however when trying to store state of three towers at each step (255 step for 8 disks) I tried to use array of array or array of objects that contain 3 arrays representing disks in every tower, but only states where there is 8 disks (array items) are stored otherwise there is only empty array! following my code:

class steps //object that store state of towers at each step
{
    constructor(src, spr, tgt) 
    {
        this.src = src;
        this.spr = spr;
        this.tgt = tgt;
    }
}

function Hanoi(n, source, target, spare)
{
    if(n>0) {
        Hanoi(n-1, source, spare, target);
        target.push(source.pop());

        document.getElementById('output').innerHTML+= source+ " ;" + spare + " ;" + target + "<br/>"; //print data to see  what is happening

        var obj = new steps(source, spare, target);
        console.log(source, spare, target);

        src_steps.push(obj); //src_steps is global variable
        Hanoi(n - 1, spare, target, source);
    }
}

src = [8, 7, 6, 5, 4, 3, 2, 1];
spr = [];
tgt = [];

Hanoi(8, src, spr, tgt);

The problem is that printed array contain the data as it should be, however the object array only contain arrays that contain 8 items or empty but no arrays with less than 8 items! What is happening here?

Your recursive call at the start of the function doesn't make any sense. I don't know if you're on es6+, but template strings would make the `document` line MUCH easier to understand. — Maximilian Burszley, Apr 03 '18 at 19:35
@TheIncorrigible1 My question is not about the logic of the solution, it is working fine and recursive function make the desired solution — Ahmad Issa, Apr 03 '18 at 19:55

score 0 · Answer 1 · answered Apr 04 '18 at 20:27

I wasn't able to figure what is the source of problem, but it seem related to some deep stuff in JavaScript objects or maybe the Interpreter optimizations or so. However I found a workaround that helped me, I will write it now hopping it help someone.

    let s = new Array(src.length);
    let sp = new Array(spr.length);
    let tg = new Array(tgt.length);

    for(let i=0; i < s.length; i++)
    {
        s[i] = src[i]; //src is the global variable array used as argument for Hanoi function
    }

    for(let i=0; i < sp.length; i++)
    {
        sp[i] = spr[i];
    }

    for(let i=0; i < tg.length; i++)
    {
        tg[i] = tgt[i];
    }

    obj = new steps(s, sp, tg);

So instead of just assigning arrays source, spare, and target into object directly, we just create other arrays and we clone every element (using for loop) and then we use those arrays to construct our object, in the code shown in the question the result was only [8, 7, 6...,1] or just empty array in all steps and all towers. With this workaround we will get the expected result (arrays representing the actual state of towers such as src[1, 2], spr[4,6,7] etc...).

Note that while debugging using breakpoints the code in the question show fine results and this makes it much more weird bug, which will probably will stay a mystery for me!

Array of variable length array in JavaScript

1 Answers1