CODEWITHSUNDEEP
javascriptarraysobject
Johnny G.
Johnny G.

Reputation: 525

Why can't you access this array with index?

Why does this array have a length property of 0? And as a follow up to that question, why can't you access an item in this array with an index value?

Consider the following: 

var box = [];

box['material'] = 'cardboard';
box['size'] = 'small';

box.length; //0
console.log(box);
//[ material: 'cardboard', size: 'small' ]

box[0]; //undefined

However, when I do the following:

var box = [];
box['0'] = true;
box['1'] = 'cardboard';
box['2'] = 'some value';

box.length; //3
box[0];// true

Why does it output the correct length in this case, since '0' is a string and not a number and access the correct item with the 0 index?

Upvotes: 0

Views: 914

Answers (3)

bleistift2
bleistift2

Reputation: 525

I think you’re confusing objects with arrays. While arrays are indeed objects in javascript, that doesn’t help us here.

What you are trying to instantiate is an associative array with key-value pairs “material”->“cardboard”, “size”->“small”. However, such a datastructure does not exist in javascript. Array must only have integers as indexes, as in

box = [];
box[0] = 'material';
box[1] = 'someValue';

The reason why your code (which only seems to be an associative array)

box = [];
box['0'] = true;
box['1'] = 'cardboard';

works is because of implicit type conversion. Because you’ve declared box to be an array, a string is not valid in this position, so javascript quietly converts it into an integer, so you again get a plain, boring, integer-indexed array as above.

What you can do, though, is create an object with attributes. So you might, for example, state

box = {};           // box is now an object
box.size = 'small'; // box now has an attribute called “size”
                    // which has the (string) value “'small'”
box.material = 'cardboard';

or at one go using the notation for object literals:

box = {
    size: 'small',
    material: 'cardboard'
};

This is the closest you can get to associative arrays in javascript. Note that objects do not have a length. If you want to access the number of attributes they have, you have to use Object.keys(box).length. To iterate over the keys, use

for(var key in box){
    console.log('value of ' + key + ' is ' + box[key])
}

Note the array-like notation here, but remember: You’re dealing with objects, not arrays, though dealing with them looks similar. Since box is of type object, you will not only get the attributes you have defined yourself, but also any attributes which are defined for every object. To get only the keys you put in there yourself, use

for (var key in box) {
    if (box.hasOwnProperty(key)) {
        // do stuff
    }
}

If you need to add keys, i.e. attributes at runtime, use (for example)

//supposing that box was instantiated as above
var listOfBoxAttributes = ['shape', 'color', 'weight'];
for(var i in listOfBoxAttributes)
    box[listOfBoxAttributes[i]] = undefined;

Upvotes: 0

Pointy
Pointy

Reputation: 413709

In JavaScript, the length of an array is always one more than the largest numeric (integer) property name. Arrays can have properties whose names are not numeric, but they don't count towards the length of the array (and they are ignored in some other important situations).

Object property names are always strings, but strings that are non-negative integer values when interpreted as numbers are special in arrays. Accessing properties with numeric values works because the numbers are first converted to strings; thus box[0] and box['0'] do exactly the same thing.

Upvotes: 2

Imbar M.
Imbar M.

Reputation: 1114

when setting box['material'] it creates a property called 'material' with value 'cardboard'. this doesn't add a element to the list!

you need to use .push() or asign the index you want.

also, the '0' string is cased to a number, so obj['0'] and obj[0] is the same (not just for 0, this happens for all numbers)

Upvotes: 0

Related Questions