Difference between associative [], {} and object in javascript
Possible duplicate:
What is the difference between an array and an object? The item exists in the array, but it says the array is 0 length?
I am a bit confused about object and associative array in javascript. I read this: question , but this question says there isn't much difference in both. I wrote this in the console:
var a = [];
a["A"] = 1;
var b = {};
b["B"] = 2;
var c = new Object();
c["C"] = 3;
output for above:
a gives {A : 1}
b gives {B : 2}
c gives {C : 3}
All of the above three cases give the same thing as they all give an object. The question is how all of the above three cases are handled in javascript.
source to share
In your example b
and c
is essentially the same, because it {}
is equivalent new Object()
.
Coming back to a
, it is defined as Array
, which is a special kind Object
in the sense that numeric properties (based on uint32) are handled differently. The property is length
updated when these properties are added and removed.
When you use it 'A'
as an index, it is treated as a regular property determined by how the Object
properties work, so you can access it as a.A
or a['A']
, whereas the index [5]
can only be accessed using a[5]
.
Usually the debug output of the array is always []
if the property length
is nonzero, which is why you are showing somewhat irregular.
Trivia
According to ECMAScript documentation , a particular p value can only be an array index if and only if:
(p >>> 0 === p) && (p >>> 0 !== Math.pow(2, 32) - 1)
See also:
The item exists in the array, but it says the array is 0 length?
source to share
An array is also an object, so you can use non-numeric indices as well. They will be added as properties of the array object, not part of the array data.
The difference between an array and an object is that an array counts the numerically indexed properties as part of the array data and updates the property accordingly length
. (Also, the Array object has some specific methods for working with array data.)
var a = [];
a[42] = 1337;
Now the length has changed to include the element:
alert(a.length); // shows 43
Using strings or numbers as an index doesn't matter, the numeric index is counted even if it's a string:
alert(a[42]); // shows 1337
alert(a["42"]); // shows 1337
Decreasing the length removes properties outside of it:
a.length = 10;
alert(a[42]); // shows undefined
source to share
Let's start with a clarification:
new Object()
coincides with {}
new Array()
coincides with []
The latter are only abbreviated forms of the former.
Behind the scenes, everything in javascript is basically an object (that's an exaggeration, but pretty accurate). Arrays are simply inferred from objects. Here's a pretty rudimentary example of what an array looks REALLY like :
var myArray = {};
myArray[0] = 'value1';
myArray[1] = 'value2';
myArray[2] = 'value3';
myArray[length] = 3;
Array prototype contains all methods. For example:
// myArray#push
myArray.prototype.push = function(val){
myArray[this.length] = val;
this.length++;
}
Another way to illustrate this is to take an array and add keys that are not numeric:
var example = [];
example.push(0);
example.push(1);
example.push(2);
example['a'] = 'a';
example['b'] = 'b';
example['c'] = 'c';
example.log = function(){
for(var i = 0, l = this.length; i < l; i++){
console.log( example[i] );
}
console.log(this['a']);
console.log(this['b']);
console.log(this['c']);
}
// example[0] is 0
// example[1] is 1
// example[2] is 2
// example.log is my custom function
example.log(); // results in
// 0
// 1
// 2
// a
// b
// c
Also, don't always believe everything the console tells you. For example, if you do this:
var console_confusion = {};
console_confusion.length = 100;
console_confusion.splice = function(){ /* do absolutely nothing */ };
console.log( console_confusion );//results in
//
// in Chrome:
// [undefined Γ 100]
//
Chrome will iterate over anything using the numeric length property and the splice function as an array. This is why jQuery objects are like arrays in the console.
source to share
Please read the following article - http://www.2ality.com/2012/12/arrays.html
In short, "regular arrays" denoted as []
in JavaScript are also objects, like and {}
, but have property length
and numeric keys ("pointers") as well as their internal ones __proto__
in an object Array.prototype
that contains all methods Array
such as push
or forEach
, etc. etc.
source to share