When to use array and when to use object?

Question

I've read a lot of articles about objects and arrays lately but they had contrary info / facts for some reason. I need your help to learn once and for all: when it's best to use array and when object?

Obvious reason is to use array when you need specific order. What else? What about this example?

---

• There's a lot of pushing
• There's a lot of checking if array contains something
• There's a lot of removing

Note that this example has much smaller numbers that I need (which is in thousands).

---

Code I wrote for this question, it has few things I would never do but for the sake of this question:

var x = [];
var y = [];
var z = [];

var clickedX = [];
var clickedY = [];
var clickedZ = [];

var count = 100;

for ( var a = 0; a < count; a++ ) {

    //For the sake of this example: random int 1, 2 or 3
    var type = Math.floor(Math.random() * 3) + 1;

    createDiv( type );
}


function createDiv( thisType ) {

    var self = this;
    var div = self.div;

    var type = thisType;

    if( !div ) {

        div = this.div = document.createElement( 'div' );
        div.className = 'marker';

        //Push to "right" array
        if( type == '1' ) {

            x.push( self );
        }
        else if ( type == '2' ) {

            y.push( self );
        }
        else {

            z.push( self );
        }

        //Attach click event
        div.onclick = function() {

            // X
            var indexX = x.indexOf( self );

            if( indexX > -1 ) { 

                //Push to new array
                clickedX.push( self );

                //Remove from old array
                x.splice( indexX, 1 );
            }

            // Y
            var indexY = y.indexOf( self );

            if( indexY > -1 ) { 

                //Push to new array
                clickedY.push( self );

                //Remove from old array
                y.splice( indexY, 1 );
            }

            // Z
            var indexZ = z.indexOf( self );

            if( indexZ > -1 ) { 

                //Push to new array
                clickedZ.push( self );

                //Remove from old array
                z.splice( indexZ, 1 );
            }
        }; // onclick
    } // if( !div )
} // createDiv()

---

Data example what Im currently dealing with:

// Data Im dealing with

objects = { 

    { objects1: [
                    0: { object : [4-5 assigned values (int, string, array)] }, 
                    1: { object : [4-5 assigned values (int, string, array)] },
                    //etc
                ] 
    }, 
    { objects2: [
                    0: {object}, 
                    1: {object},
                    //etc
                ] 
    } 
}

// 1. I need to iterate through every "object" in both "objects1" and "objects2"
// 2. I need to iterate through "array" in every "object" in "objects1"


for( /* "object" count in "objects1" */ ) {

    //Do something for each "object" in "objects1"

    for( /* items in "array" count */ ) {

        //Do something for each item in "array"
    }
}

// AND

for( /* "object" count in "objects2" */ ) {

    //Do something for each "object" in "objects2"
}

Answer 1

Arrays

Basically, you need to use an array, when you have a list of consequent data, and you are going to work with it as a collection.

It easily adds, iterates, gets count and checks for existence.
It is difficult to remove items in an array.

Also, it stores order.
For example, if you have 10 integers, and you need to find the index of the minimum one, then it is logical to use an array.

Objects

Use objects, when your items have keys (especially, non-integer) and you are going to work with them one by one.

It is convenient to add, remove, check for existence properties. However, it is less convenient to iterate through object properties, and absolutely inproper to get its count.

It is also impossible to store items' order.

Time complexity

Answering your question about pushing, checking for existence and removing:

• Both property setting and array pushing takes O(1) time, but I strongly believe that the first one is a bit slower
• Checking for existence takes the same O(1) time
• Removing an element is what array is not designed for - it needs to shift all items and takes O(n) time, while you can remove a property for O(1)

Bad usage example

There are some really bad usages. If you have the following, then you use array or object wrong.

1. Assign a random value to an array:

   var a = [];
   a[1000] = 1;
   

   It will change the length property of an array to 1001 and if you try to output this array, you will get the following:

   [undefined,undefined,undefined,undefined... 1]
   

   which is absolutely useless, if it is not done on purpose.

2. Assign consequent values to an object

    var a = {};
   
    for (var i = 0; i < 10; i++)
    {
        a[i] = 1;
    }
   

Your code

Talking about your code, there are many and many ways to do this properly - just choose one. I would do it in the following way:

var items = [];

for (var i = 0; i < count; i++)
{
    var o = {
        type: Math.floor(Math.random() * 3) + 1,
        isClicked: false
    };

    var div = document.createElement('div');
    div.className = 'marker';

    div.onclick = function() {
        o.isClicked = true;
    };

    o.div = div;
    items.push(o);
}

function GetDivs(type, isClicked)
{
    var result = items;
    if (type) 
        result = result.filter(function(x) { return x.type === type; });
    if (isClicked !== undefined) 
        result = result.filter(function(x) { return x.isClicked === isClicked; });
    return result;
}

Then, you will be able to get any items you want:

var all = GetItems(0); // or even GetDivs()
var allClicked = GetItems(0, true);
var allNotClicked = GetItems(0, false);

var divsTypeA = GetItems(1);
var clickedDivsTypeB = GetItems(2, true);
var notClickedDivsTypeC = GetItems(3, false);

With this usage, you don't need to remove any items at all - you just mark them as clicked or not, which takes O(1) time.

jQuery

If you use jQuery and data HTML attributes, then you won't need to use arrays or objects at all:

for (var i = 0; i < count; i++)
{
    $('<div/>')
      .addClass('marker')
      .attr('data-type', Math.floor(Math.random() * 3) + 1)
      .appendTo('body')
      .click(function() {
          $(this).addClass('clicked');
      });
}

Now, you can use the selector to find any items:

var all = $('.marker');
var allClicked = $('.marker.clicked');
var allNotClicked = $('.marker:not(.clicked)');

var divsTypeA = $('.marker[data-type='1']');
var clickedDivsTypeB = $('.marker[data-type='2'].clicked');
var notClickedDivsTypeC = $('.marker[data-type='1']:not(.clicked)');

However, the last approach can produce lags if you really have thousands of records. At the same time, is it a good idea to have 1000 dynamic divs on your page, at all? :)