Strange JavaScript behaviour, variable changing value before converter function is called

Question

I'm passing down some JSON data from Smarty. I'm applying this to a JavaScript variable, options.

If you've seen my previous question about date formats you'll know I need to do a bit of work on the data coming in, so I've got a function called chart_convert_dates() that's called, passing in the options (well, options.data), and upon it's return setting it back again.

If you read through my code you'll notice I'm debugging the options variable, and it changes from the original before the function is called!?

If I comment out the function call, the variable is untouched, as it should be at that point.

This happens with Chrome, FF... what's going on?

{literal}

    <script type="text/javascript">

        $(document).ready(function() {

            // set JS var, this data is coming in from smarty
            var options = {/literal}{$options}{literal};

            // these should both be exactly the same
            debug.debug({/literal}{$options}{literal});
            debug.debug(options);

            // but the above outputs aren't the same! options has been modified
            // by the function below... that hasn't even fired yet!? We can prove
            // this by commenting out the following function call

            options.data = chart_convert_dates(options.data);

            // ... do something else

        });

    </script>

{/literal}

Answer 1

This is, of course, impossible.

You'll probably find that the debug.debug() function is saving a reference to the object it is provided with, rather than converting it to a string immediately. When you then view the contents of it's argument at a later time, the output will reflect the current state of the object, rather than the state it was in.

This is best explained with the following example:

var debug = {
    report: function () {
        // console.log(this._value);
    },
    debug: function (arg) {
        this._value = arg; // save a reference
    }
}

var options = {
    foo: 1
};

debug.debug(options);

options.foo = 2;

debug.report(); // will show 2 (http://jsfiddle.net/zQFPm/)

http://jsfiddle.net/zQFPm/