Why can I add named properties to an array as if it were an object?

Question

The following two different code snippets seem equivalent to me:

var myArray = Array();
myArray['A'] = "Athens";
myArray['B'] = "Berlin";

and

var myObject = {'A': 'Athens', 'B':'Berlin'};

because they both behave the same, and also typeof(myArray) == typeof(myObjects) (both yield 'object').

Is there any difference between these variants?

Answer 1

Virtually everything in javascript is an object, so you can "abuse" an Array object by setting arbitrary properties on it. This should be considered harmful though. Arrays are for numerically indexed data - for non-numeric keys, use an Object.

Here's a more concrete example why non-numeric keys don't "fit" an Array:

var myArray = Array();
myArray['A'] = "Athens";
myArray['B'] = "Berlin";

alert(myArray.length);

This won't display '2', but '0' - effectively, no elements have been added to the array, just some new properties added to the array object.

Answer 2

In JS arrays are objects, just slightly modified (with a few more functions).

Functions like:

concat
every   
filer
forEach
join
indexOf
lastIndexOf
map
pop
push
reverse
shift
slice
some
sort
splice
toSource
toString
unshift
valueOf 

Answer 3

You can add named properties to almost anything in javascript but that doesn't mean that you should. Array in javascript should be used as a list, if you want an associative array use Object instead.

Beware that if you really want to use an Array with named properties instead of Object those properties won't be accessible in a for...of loop and you might also get unexpected results when JSON encoding it to pass it around. See example below where all non-numeric indexes get ignored:

let arr = [];
let obj = {};

arr['name'] = 'John';
obj['name'] = 'John';

console.log(arr);    // will output [name: "John"]
console.log(obj);    // will output {name: "John"}

JSON.stringify(arr); // will return [] <- not what you expected
JSON.stringify(obj); // will return {"name":"John"}

Answer 4

Me thinks, me too metaphorical and cryptic with previous answer. Clarification follows.

An instance of Array, Boolean, Date, Function, Number, RegExp, String is an Object but enhanced with methods and properties specific to each type. For example, an array has a predefined length property while generic objects do not.

javascript:alert([].length+'\n'+{}.length)

displays

0
undefined

Intrinsically, the FF Gecko interpreter also distinguishes between Arrays and generic Objects with distinct differences evaluating language constructs.

javascript:
  ra=[  "one",   "two",   "three"]; ra.a=4;
  ob={0:"one", 1:"two", 2:"three"}; ob.a=4;
  alert(
    ra            +"\n\n"+
    ob            +"\n\n"+
    ra.toSource() +"\n\n"+
    ra.a          +"\t .toSource() forgot me! \n\n"+
    ra.length     +"\t and my length! \n\n"+
    ob.toSource());
  ps=""; for(i in ra)ps+=i+" "; alert(ps);  /* NB .length is missing! */
  ps=""; for(i in ob)ps+=i+" "; alert(ps);

displaying

one,two,three

[object Object]

["one", "two", "three"]

4    .toSource() forgot me! 

3    and my length! 

({0:"one", 1:"two", 2:"three", a:4})

and 0 1 2 a and 0 1 2 a.

Regarding the statement that all objects are functions:

It is neither syntactically nor semantically correct to use an arbitrary object instance as a function like 123() or "abc"() or []() or {}() or obj() where obj is any type other than Function, so an arbitrary object INSTANCE is not a Function. However, given an object obj and it's type as Array, Boolean, Date, ..., how did obj come to be as an Array, Boolean, Date, ...? What is an Array, Boolean, Date, ...?

javascript:
    alert([Array, Boolean, Date, Function, 
              Number, Object, RegExp, String] . join('\n\n') );

displays

function Array() {
    [native code]
}

function Boolean() {
    [native code]
}

function Date() {
    [native code]
}

function Function() {
    [native code]
}

function Number() {
    [native code]
}

function Object() {
    [native code]
}

function RegExp() {
    [native code]
}

function String() {
    [native code]
}

In every case, without equivocation, the object type manifests as a function definition, hence the statement that all objects are functions! (The tongue-in-cheek is that I intentionally obscured and blurred the distinction of an object instance with that of it's type! Still, this shows "you can't have one without the other", Object and Function! Capitalization emphasizes type as opposed to instance.)

Both a functional and object paradigm seem to be fundamental to the programming and implementing of the JS interpreter low level built-in primitives, such as Math and JSON and true.

 javascript:alert([Math, JSON, true.toSource()].join("\n\n"));

displays

[object Math]

[object JSON]

(new Boolean(true))

---

At the time of the development of Javascript, an object-centric programming style (OOP's - Object Oriented Programming style - the "'s" is my own pun!) was in vogue and the interpreter was similarly christened with Java to give it greater credibility. Functional programming techniques were relegated to more abstract and esoteric examinations studying the theories of Automata, Recursive Functions, Formal Languages, etc. and as such not as palatable. However, the strengths of these formal considerations are clearly manifest in Javascript particularly as implemented in FF's Gecko engine (ie. .toSource()).

---

The Object definition for Function is particularly satisfying for it is defined as a recurrence relation! defined using it's own definition!

function Function() { [native code] }
and since a function is an Object the same sentiment holds for
function Object() { [native code] }.

Most of the other definitions quiesce to a static terminal value. However, eval() is a particularly powerful primitive and so a String can also embed arbitrary functionality.

Note again, the vernacular used above obscures object type and instance distinction.

Answer 5

Everything in JavaScript is an object besides primitive types.

The code

var myArray = Array();

creates an instance of the Array object while

var myObject = {'A': 'Athens', 'B':'Berlin'};

creates an instance of Object object.

Try the following code

alert(myArray.constructor)
alert(myObject.constructor)

So you will see the difference is in the type of object constructor.

The instance of the Array object will contain all the properties and methods of the Array prototype.

Answer 6

The difference between the arrays and the other objects in JavaScript. While arrays have a magically updating length property, for objects other than the arrays there is no way to implement such a property.

var arrName = [];
arrName[5] = "test";
arrName.length; // <- 6

Array are used to store things with an ordinal index - use it like a traditional array, stack, or queue. An object is a hash - use it for data that has a distinct key.

Answer 7

In JavaScript Arrays are special typed objects

typeof new Array(); // returns "object" 
typeof new Object(); // returns "object

Arrays used numbered Indexes and Objects used named Indexes

so we can able add named properties to Array

const arr = []
arr["A"] = "Hello" //["A":"Hello"]

console.log(arr.length) // 0 

arr.length returns 0 , because array with named indexes are prefer to call Objects

console.log(Object.keys(arr)); // ["A"]
console.log(Object.keys(arr).length); //1

Answer 8

The {}-notation is just syntactical sugar to make the code nicer ;-)

JavaScript has many similar constructs like the construction of functions, where function() is just a synonym for

var Func = new Function("<params>", "<code>");