Why do my values mutate inside the arrays?

Question

I wrote a little test program, exploring my problem, and it works the way I expect it, printing "four, five, six".

var foo = function() {
    console.log("just one more test")
    var destination = new Array;
    data = [ "four", "five" , "six" ]
    var parent = [ 0, 1, 2 ];
    var something;
    parent.forEach(function(element) {
        something = data[element];
        destination.push(something);
    })
    destination.forEach(function (thing) {
        console.log(thing);
    })
}
foo();

But in my real code, when I push things on to my 'clickable' array, all of the entries mutate into the current value of the 'clicker' variable. There are 3 entries in my 'scheme_list', and they draw correctly, but as I try to build areas to click on, at each iteration of the loop "in the loop" prints the value just pushed on to the array for every instance. That is, the instances of 'clicker' already in the loop change to the current value of clicker. I'm scratching my head trying to understand the difference between my real code and my test code. Or, more to the point, how to fix my real code.

var layout_color_schemes = function(scheme_list) {

    var canvas = document.getElementById('color_picker_canvas');
    var ctx = canvas.getContext('2d');

    var x_upper_left = 5;
    var y_upper_left = 5;
    var width = 200;
    var height = 30;
    var clickables = new Array;
    var clicker = {};
    clicker.rect = {};
    clicker.rect.width = width;
    clicker.rect.height = height;

    scheme_list.forEach(function(row) {
        var grad = ctx.createLinearGradient(0, 0, 100, 0);
        var cscheme = jQuery.parseJSON(row.json);
        cscheme.forEach(function(color_point) {

            grad.addColorStop(color_point[0], 'rgb(' + color_point[1] + ','
                    + color_point[2] + ',' + color_point[3] + ')');
        })
        ctx.fillStyle = grad;
        ctx.fillRect(x_upper_left, y_upper_left, width, height);

        clicker.rect.x = x_upper_left;
        clicker.rect.y = y_upper_left;
        clicker.scheme = cscheme;
        clicker.name = row.name;
        clickables.push(clicker);
        printf("clickables size = %d", clickables.length)
        for (index = 0; index < clickables.length; ++index) {
            printf("Index is %d", index)
            printf("in the loop %j", clickables[index])
        }
        ctx.fillStyle = 'black'
        ctx.fillText(row.name, x_upper_left + width + 10, 5 + y_upper_left
                + (height / 2));

        y_upper_left = y_upper_left + height + 10;

    });
    clickables.forEach(function(area) {
        printf("before call clickable area = %j", area)
    });

    wire_clickables(clickables);

};

function wire_clickables(clickables) {
    clickables.forEach(function(area) {
        if (area.hasOwnProperty('rect')) {
            printf("wiring a clickable %j", area);

            $("#color_picker_canvas").mousemove(function(e) {
                var inside = false;
                var offsetX = e.pageX - $(this).position().left;
                var offsetY = e.pageY - $(this).position().top;

                if (area && contains(area.rect, offsetX, offsetY)) {
                    document.body.style.cursor = 'pointer'
                }
                else {
                    document.body.style.cursor = 'default'
                }
            })
        }
    })

}

function contains(rect, x, y) {
    return (x >= rect.x && x <= rect.x + rect.width && y >= rect.y && y <= rect.y
            + rect.height)
}

Answer 1

The clicker object exists outside of the loop, so all you are doing is pushing the same reference onto clickables. Instead, you want to push a copy of it. There are many ways to do this, but in your case this may be one of the simplest ways:

Replace

clickables.push(clicker);

with

clickables.push(JSON.parse(JSON.stringify(clicker));

Alternatively, move the clicker declaration and initialization inside the loop.