Question

I am learning JS from scratch and implementing HighCharts code using JS. Seeing one of the demo I see a variable data array declaration like below:

        data = [{
        y: 55.11,
        color: colors[0],
        drilldown: {
           name: 'MSIE versions',
           categories: ['MSIE 8.0', 'MSIE 6.0', 'MSIE 7.0', 'MSIE 9.0'],
           data: [{
               y: 33.06,
               drilldown: {
                   name: 'drilldown next level',
                   categories: ['a', 'b', 'c'],
                   data: [23,54,47],
                   color: colors[0]
               }
           }, 10.85, 7.35, 2.41],
           color: colors[0]
        }
     }, {
         y: 21.63,
        color: colors[1],
        drilldown: {
           name: 'Firefox versions',
           categories: ['Firefox 3.6', 'Firefox 4.0', 'Firefox 3.5', 'Firefox 3.0', 'Firefox 2.0'],
           data: [13.52, 5.43, 1.58, 0.83, 0.20],
           color: colors[1]
        }
     }];

What does this ‘data’ array declaration means?

Answer 1

It is an array with two elements, each one an object. Those are declared in object literal notation. For instance, the second element is this:

{
    y: 21.63,
    color: colors[1],
    drilldown: {
       name: 'Firefox versions',
       categories: ['Firefox 3.6', 'Firefox 4.0', 'Firefox 3.5', 'Firefox 3.0', 'Firefox 2.0'],
       data: [13.52, 5.43, 1.58, 0.83, 0.20],
       color: colors[1]
    }
 }

This object is composed of various properties. For instance, the property “y” has the value 21.63. The property “drilldown” is another object and so on. Primitives, arrays, and objects can be embedded ad infinitum.

Furthermore, I can deduct that data[ 0 ] and data[ 1 ] appear to be similar objects since they have the same properties.

One thing that may help if you’re having a hard time seeing the structure is being very strict about your code style, especially indentation. I’ve reworked it a little bit and shown a very generous spacing. It takes up more lines, but it should be clearer what is related.

data = [
    {
        y: 55.11,
        color: colors[0],
        drilldown: {
        name: 'MSIE versions',
            categories: ['MSIE 8.0', 'MSIE 6.0', 'MSIE 7.0', 'MSIE 9.0'],
            data: [
                {
                    y: 33.06,
                    drilldown: {
                        name: 'drilldown next level',
                        categories: ['a', 'b', 'c'],
                        data: [23,54,47],
                        color: colors[0]
                    }
                },
                10.85,
                7.35,
                2.41
            ],
            color: colors[0]
        }
    },{
        y: 21.63,
        color: colors[1],
        drilldown: {
            name: 'Firefox versions',
            categories: ['Firefox 3.6', 'Firefox 4.0', 'Firefox 3.5', 'Firefox 3.0', 'Firefox 2.0'],
            data: [13.52, 5.43, 1.58, 0.83, 0.20],
            color: colors[1]
        }
    }
];