Diffrence between [] and {} for Associative array in Javascript

Question

Implementing a simple DataBase now.

The duplicate tag for this question is a bad judge, I think. The linked question does nothing for my requirement.

A user ID refer a user data, and I have 2 options to do that as follows: DB1 or DB2,

var DB1 = {
    user: {}
};
var DB2 = {
    user: []
};

DB1.user['001'] = {
    email: 'name@email.com',
    name: 'ken'
};
DB2.user['001'] = {
    email: 'name@email.com',
    name: 'ken'
};

console.log(DB1.user['001']);
console.log(DB2.user['001']);

The both DB1 and DB2 behaves as expected exactly in the same way, at least it appears so to me.

Is there any difference? Is just a way to express {} or []?

If different which one is more efficient?

Thanks for your thought.

UPDATE:

Thank you very much for all who kindly give me answers in detail.

I probably understand in this case, the array [] for associative manner is actually an object.

In this case, it behaves the same (as the object not array), fine I know that.

So, what I would like to know is , in this case, is it just a difference of the expression [] and {}.

More importantly, in this case, if it's not only the expression, how different and which one is more efficient, that's what I would like to know. Thank you.

UPDATE2:

Ok, this is not that obvious as many people thought. I've wrote a test code as follows:

var DB1 = {
    user:
    {}
};
var DB2 = {
    user: []
};
var DB3 = {
    user: []
};

for (var i = 0; i < 100000; i++)
{
    var id = ('0000' + i)
        .slice(-5);

    DB1.user[id] = {
        email: 'name@email.com',
        name: 'ken'
    };

    DB2.user[id] = {
        email: 'name@email.com',
        name: 'ken'
    };

    DB3.user[i] = {
        email: 'name@email.com',
        name: 'ken'
    };

}
//confirm the value just in case
console.log(DB1.user['00000']);
console.log(DB1.user['00001']);
console.log(DB1.user['99999']);
console.log(DB1.user['100000']);

for (var t = 0; t < 10; t++)
{
    console.log('-----------test ' + t);
    console.time('DB1');
    for (var i = 0; i < 100000; i++)
    {
        var id = ('0000' + i)
            .slice(-5);

        var data = DB1.user[id];
    }
    console.timeEnd('DB1');

    console.time('DB2');
    for (var i = 0; i < 100000; i++)
    {
        var id = ('0000' + i)
            .slice(-5);

        var data = DB2.user[id];
    }
    console.timeEnd('DB2');


    console.time('DB3');
    for (var i = 0; i < 100000; i++)
    {
        var id = ('0000' + i)
            .slice(-5);

        var id1 = id * 1;
        var data = DB3.user[id1];
    }
    console.timeEnd('DB3');
}

Result:

{ email: 'name@email.com', name: 'ken' }
{ email: 'name@email.com', name: 'ken' }
{ email: 'name@email.com', name: 'ken' }
undefined

-----------test 0
DB1: 46ms
DB2: 68ms
DB3: 28ms
-----------test 1
DB1: 39ms
DB2: 33ms
DB3: 26ms
-----------test 2
DB1: 32ms
DB2: 39ms
DB3: 25ms
-----------test 3
DB1: 57ms
DB2: 33ms
DB3: 27ms
-----------test 4
DB1: 39ms
DB2: 35ms
DB3: 27ms
-----------test 5
DB1: 39ms
DB2: 32ms
DB3: 27ms
-----------test 6
DB1: 33ms
DB2: 36ms
DB3: 26ms
-----------test 7
DB1: 39ms
DB2: 41ms
DB3: 40ms
-----------test 8
DB1: 32ms
DB2: 32ms
DB3: 28ms
-----------test 9
DB1: 36ms
DB2: 31ms
DB3: 28ms

For 100000 records, the array DB is slightly faster, but I think I will use Associative array style Object DB.

Answer 1

[] is an array literal; it's equivalent to new Array().

{} is an object literal; it's equivalent to new Object().

You should only use arrays if you're actually storing an array of items; otherwise, use objects.

Answer 2

The both DB1 and DB2 behaves as expected exactly in the same way, at least it appears so to me.

Not quite. [] creates an array, {} creates an object. In JavaScript, standard arrays aren't really arrays at all, they're just objects with some special behavior. You can add properties to those objects that aren't array entries, just like you can any other object. In your example, you're not using the array as an array, so both work, but if you were using the array as an array (using array indexes, length, push, splice, etc.), only the [] version would work as only that gives you an array.

Use an array when you need the features of an array. Use an object when you just need to map names to values. If using an array, be sure to use genuine array indexes, not non-index property names like '001'. (Details on that below.)

Here's an example of how you're not using the array as an array:

DB1.user['001'] = ...;

That does not create an array entry. Proof:

var a = [];
a['001'] = "foo";
console.log(a.length); // 0

It creates a property on the object with the name "001", but that property is not an array entry. In contrast:

a[1] = "foo";

or

a['1'] = "foo";

...creates an array entry:

var a = [];
a[1] = "foo";
console.log(a.length); // 2 (see below)

Why the difference? Again, standard arrays are just objects with special behavior. One of the key bits of special behavior relates to a certain class of property names, specifically those that are all digits in normal numeric form (no leading zeros) (they're still strings, even though we act like they're numbers). A property with a name in standard numeric form (and within range, they're allowed to be 0 through 2³²-2, inclusive) is an array entry.

---

I keep saying "standard arrays" because JavaScript is getting typed arrays (in fact, they're already in most engines):

var a = new Int32Array(10);

Typed arrays are actual arrays, completely unlike the [] "arrays".

---

Side note: Why was the length 2 here?

var a = [];
a[1] = "foo";
console.log(a.length); // 2

Because JavaScript arrays, by their nature, are sparse, and one of the special behaviors I was talking about is that when you add a property to an array that fits the definition of an array entry, length is set to the value one greater than the highest-numbered array entry. So even though our a array has only one entry, its length is 2.

---

Further side note: Objects are not called "associative arrays" in JavaScript, that's primarily a PHP term for a very special data structure it has which is an ordered name/value map. In JavaScript, we call them "objects" (primarily), or sometimes "maps" or "dictionaries." They are unordered, unlike PHP's associative arrays.

---

More importantly, in this case, if it's not only the expression, how different and which one is more efficient, that's what I would like to know.

Since you're not using the array as an array, I'd expect the object version to be slightly more efficient, because engines will initially try to optimize based on your using an array as an array, and then fall back to the object behavior when you do things like your '001' property name. So probably use an object from the start.

But in general, JavaScript "efficiency" is a very difficult topic. What's efficient on one engine is not efficient on other engines. Even if you don't believe premature optimization is a waste of time in other realms, it really is with JavaScript. Obviously don't do dumb things, but in general, wait until a performance problem arises and then tackle that problem on the platform on which it arises (and then test the other platforms you support to make sure you haven't introduced a new problem there).

Answer 3

user: {}

creates an object whereas

user: []

creates an array. Arrays inherit from Object, so you can add random properties like this

DB2.user['001'] = {..};

to an array. For example

var myArray = [];
myArray["js"] = "awesome";
myArray.push("a");
myArray.push("b");
console.log(myArray);          // [ 'a', 'b', js: 'awesome' ]

Answer 4

The notation is the same, but you are creating different objects. [] is an Array, so you'll get all the Array methods in the prototype. {} is an Object, so you'll the the Object methods.

An Array is probably best for your scenario, as it ensures the order of its elements. There's no guarantee of the order of items in an Object.

If you care about the order, use Array [], otherwise use Object {}.

Efficiency Test

var i = 10000;
console.time('arr');
while (i--) {
    ([]);
}
console.timeEnd('arr');


i = 10000;
console.time('obj');
while (i--) {
    ({});
}
console.timeEnd('obj');

result

arr: 10.527ms
obj: 8.974ms