Maintaining array order in Javascript

Question

I am new to JavaScript and I am having trouble working with my array, I want my array ordered how I explicitly write it and not how JavaScript decides it wants it.

If we

Answer 1

You need to understand what an Array and what an Object are, they are fundamentally different things and do not behave the same.

Array

Arrays are list-like objects whose prototype has methods to perform traversal and mutation operations. Neither the length of a JavaScript array nor the types of its elements are fixed. Since an array's size length grow or shrink at any time, JavaScript arrays are not guaranteed to be dense. In general, these are convenient characteristics; but if these features are not desirable for your particular use, you might consider using typed arrays.

Examples of an Array, note the magical length property, the values assigned to an Array are always found at their indexed locations; index is from 0 to 2^32 - 1

// dense arrays
var array1 = [1, 2, 3];

array1.length === 3;
array1[0] === 1;

var array2 = [];

array2[0] = 1;
array2[1] = 2;
array2[2] = 3;

array2.length === 3;
array1[1] === 2;

var array3 = [];

array3.push(1);
array3.push(2);
array3.push(3);

array3.length === 3;
array3[2] === 3;

// and a sparse array
var array4 = [];

array4[0] = 1;
array4[2] = 2;
array4[4] = 3;

array4.length === 5;
array4[1] === undefined;

Iterating an array for

var array = [1, 2, 3, 4, 5];

for (var index = 0; index < array.length; index += 1) { // counts from (index) 0 to 4
    console.log(index, array[index]); // outputs 0 1 \n 1 2 \n 2 3 \n 3 4 \n 4 5
}

Object

An object is a collection of properties, and a property is an association between a name and a value. A property's value can be a function, in which case the property is known as a method. In addition to objects that are predefined in the browser, you can define your own objects.

Examples of an Object, there is no magical length property.

var object1 = {
    'zero': 1,
    'one': 2,
    'two': 3
};

object1.zero === 1;

var object2 = {);

object2['zero'] = 1;
object2['one'] = 2;
object2['two'] = 3;

object2.one === 2;

var object3 = {);

object3.zero = 1;
object3.one = 2;
object3.two = 3;

object['two'] === 3;

Iterating (enumerating) an object for..in

var object = {
   one: 0,
   two: 1,
   three: 2
};

for (var property in object) {
    if (object.hasOwnProperty(property)) { // make sure the property belongs to object
        console.log(property, object[property]); // outputs (not necessarily this order)
                                                 // three 2 \n two 1 \n one 0
    }
};

If you are trying to maintain an ordered Object, then this is not how Javascript works and iteration (enumeration) of an object is arbitrary. There are techniques that you can use to iterate (enumerate) an Object in a known order. This requires that you keep an ordered list of properties in an array and use the array in the iteration process.

var object = {
   'c': 1,
   'z': 2,
   'b': 3,
   'a': 4
}

var propertyOrder = ['c', 'z', 'b', 'a'];

for (var index = 0; index < propertyOrder.length; index += 1) {
    console.log(index, propertyOrder[index], object[propertyOrder[index]]); // outputs 0 c 1 \n 1 z 2 \n 2 b 3 \n 3 a 4
}