What's the benefit of using numbers as properties in a javascript object initialization?

Question

I'm learning javascript and after reading a tutorial on how to initialize an object, I found the following example:

var obj = {  property_1: value_1,   // property_# may be an identifier...
                      2: value_2,   // or a number...
                                    // ...,
           "property n": value_n }; // or a string

My doubt is in the property with a number as a name. I understand this, but I can't find a real benefice of using it. I read this question and, from my point of view, this kind of notation could lead to bad design or an unnecessary complexity in my code, so I would like to know why this syntax exist.

Do this kind of declaration is used frequently? In what kind of scenarios this could be an ideal alternative?

Answer 1

Arrays

JavaScript arrays are objects where some of the keys are integers(*).

[9, 8, 7] is similar to an object { 0: 9, 1: 8, 2: 7 }.

The main difference is that the array has a prototype of Array.prototype instead of Object.prototype.

(*) As Benjamin Gruenbaum points out, the array keys are coercible to UInt32. Keys of objects are always either strings or symbols. And as djechlin points out, arrays are allowed to have properties with any kind of key, but I do not recommend adding your own non-integer keys on an array.

Arguments

An array-like object called arguments is available within any function (*). Each argument received by the function will be a property on arguments, with an integer-like key.

In the following code, the example call returns an object like { 0: 9, 1: 8, 2: 7, length: 3 }.

function example(a, b, c) {
    return arguments;
}
example(9, 8, 7);

(*) In modern JavaScript, there is no arguments object in arrow functions.

Answer 2

Using integers as object keys is useful when creating sparse arrays and matrices, for instance mapping a 1000 element vector with 0 everywhere except the 10th element as

v = {10: 1}

JS arrays cannot be used here since you need to be able to specify the element position using the key.

In ECMAscript 6 using [Map]1 is better since it is actually made to be a mapping, but in codebases based on older ES standards, you would probably still see object being used for mappings like these.

Answer 3

That code is contrived to make the point. But, since you asked for an example where it could be used, let me give you a couple.

• It can happen that if you receive JSON formatted data it will be like this. Depends on details of the external system.

• Another might be for consistency. E.g. suppose you had a data model from which you would generate your HTML. It might be that is uses objects for the possible values for each field (assuming the field can only take one of a number of possible values). These fields could then be rendered as radio buttons or as a select. Some of these fields will use strings as possible values, so the natural thing is tyo make the possible values list into an object. But some will use integer keys - still probably better to stick to the list always being an object.

E.g.

var prio_field_pos_vals = {
  0: 'Show Stopper',
  1: 'Urgent',
  2: 'High',
  3: 'Low' 
}

Of course, this would probably not be defined as a standalone variable but as part of a model, but you get the idea. I would avoid integer keys (and keys with spaces in the string) for objects unless you have a reason for them, but when you have a reason, use them.