Where does this newly created object in the array gets its properties from?

Question

I am working with jquery float, and stumbled upon a function I can't figure out (console logs are mine):

function getOrCreateAxis(axes, number) {
            console.log(" ");
            console.log("getOrCreateAxis starting vars:");
            console.log("Axes:");
            console.log(axes);
            console.log("Axes -1:");
            console.log(axes[number-1]);
            console.log("Xaxes:");
            console.log(xaxes);
            console.log("options are:");
            console.log(options);


            if (!axes[number - 1])
                axes[number - 1] = {
                    n: number, // save the number for future reference
                    direction: axes == xaxes ? "x" : "y",
                    options: $.extend(true, {}, axes == xaxes ? options.xaxis : options.yaxis)
                };

            console.log("We're done in getOrCreateAxis, axes are:" + (axes == xaxes ? "x" : "y"));
            console.log(axes);
            console.log(" ");

            return axes[number - 1];
        }

As I understand it, it receives an empty array, checks if certain index exist, and if not, it creates new object at that index with properties "n", "direction" and "options" (merged in from another array).

What I can't figure out is where all the additional properties other than three above come from, when you console.log the axes array:

As far as I understand it, there's some kind of constructor automatically kicking in populating the object with additional properties but I can't figure out where it comes from or how it is triggered. Full Jquery Flot code available here, function I am struggling with is on the line 980.

The question might be bit abstract, but I feel lost here as I don't even know what I am looking for, technically. What is creating additional properties, and where can I read more about it?

I guess you are looking for [line 1837](https://github.com/flot/flot/blob/master/jquery.flot.js#L1837) — Bergi, Jul 05 '16 at 14:33
@bhspencer Yes, stepping through with debugger just gives created object with no other functions called. — Nimbrod, Jul 05 '16 at 14:40
@Bergi That function seems to be kicking in at a later point according to debugging/console logging, after properties I marked already exist. — Nimbrod, Jul 05 '16 at 14:40
@Araklaj: Are you sure it's not [still what you are seeing](http://stackoverflow.com/q/23392111/1048572)? — Bergi, Jul 05 '16 at 14:44
@Bengi: Nope, what I was seeing is my basic misunderstanding of how chrome dev console works. Expanded objects showed live properties, not ones at time of console log, making me think about this all wrong. Thanks, solved :) — Nimbrod, Jul 05 '16 at 15:34

van_folmert · Accepted Answer · 2016-07-05T14:53:54.973

Ticks are not added in the function you've pasted (getOrCreateAxis()) - it happens also during the Initialization phase, but later, in setupGrid() function:

// initialize
initPlugins(plot);
parseOptions(options_);
setupCanvases();
setData(data_);
setupGrid();
draw();
bindEvents();

If you track setupGrid() you can notice that it calls the function you're looking for - setTicks(), which is declared in line 1823:

function setTicks(axis) {
    var oticks = axis.options.ticks, ticks = [];
    if (oticks == null || (typeof oticks == "number" && oticks > 0))
        ticks = axis.tickGenerator(axis);
    else if (oticks) {
        if ($.isFunction(oticks))
        // generate the ticks
            ticks = oticks(axis);
        else
            ticks = oticks;
    }

    // clean up/labelify the supplied ticks, copy them over
    var i, v;
    axis.ticks = [];
    for (i = 0; i < ticks.length; ++i) {
        var label = null;
        var t = ticks[i];
        if (typeof t == "object") {
            v = +t[0];
            if (t.length > 1)
                label = t[1];
        }
        else
            v = +t;
        if (label == null)
            label = axis.tickFormatter(v, axis);
        if (!isNaN(v))
            axis.ticks.push({ v: v, label: label });
    }
}

I might be misunderstanding the order of things, but the data `setTicks(axis)` received already seems to have the ticks properties set: http://i.imgur.com/lAm0Iy1.png The `getOrCreateAxis()` gets called before `setupGrid()` through `parseOptions(options_)` So looking at console log in my initial question, the getOrCreateAxis() receives empty array, crates object, that object has external properties. — Nimbrod, Jul 05 '16 at 15:11
The thing is that when you expand the logged object in Developer Tools it reveals its current properties (after whole code executed), not the properties it had in the time when console.log was fired. Instead of `console.log(axes[0])`, try `console.log(axes[0].ticks)` directly - it should return `undefined`. — van_folmert, Jul 05 '16 at 15:31
..Christ, hours spent on this due to my misunderstanding of chrome dev tools. Thank you @van_folmert — Nimbrod, Jul 05 '16 at 15:32

Where does this newly created object in the array gets its properties from?

1 Answers1