Why does JavaScript allow array syntax to access properties?

Question

Closely related questions:

I have the following code sample:

var someVariable = {abc: "def", ghi: "jkl"}

someVariable["SomeProperty"] = "dfsdfadsd"

alert(someVariable["SomeProperty"])

var someOtherVariable = { abcd: "defsd", ghij: "dfsdfdss" }

someOtherVariable.SomeOtherProperty = "adfsdfsd"

alert(someOtherVariable.SomeOtherProperty);

alert(someOtherVariable["SomeOtherProperty"])

All of them do exactly what they look like - they attach a property to their respective objects. The alert shows the expected string in every case. My understanding from the related questions is that there's no functional difference between the two.

I also encountered the following statements in W3Schools's JavaScript arrays tutorial:

Many programming languages support arrays with named indexes.

Arrays with named indexes are called associative arrays (or hashes).

JavaScript does not support arrays with named indexes.

In JavaScript, arrays always use numbered indexes.

If that's the case, why is array syntax permitted here at all? (Again, my understanding from the related questions is that the actual distinction between an associative array and a JavaScript object is, at a minimum, slightly blurry, and that that's how JavaScript is implementing object properties "under the hood").

As far as I know (and please correct me if I'm wrong as JavaScript isn't my primary language), it's not possible to do other things you'd expect to be able to do with an array (e.g. iteration with a for loop), so why bother having both syntaxes? In C# you can do something like:

// A C# dictionary is basically an associative array
Dictionary<string, int> dict = new Dictionary<string, int>();
// Fill dictionary ...
foreach (string key in dict.Keys) {
    int value = dict[key];
    // Do something with the value
}

but I'm not aware of a way to do a similar thing with JavaScript properties. There's a clear necessity for this syntax in C# (keys are definitely not properties of dict), but why does JavaScript have this (given that they're exactly equivalent)? Am I missing something, or is this actually completely redundant?

@baao Thanks, that's probably a more precise way to describe it — EJoshuaS - Stand with Ukraine, Feb 28 '17 at 16:26

Quentin · Accepted Answer · 2017-02-28T16:30:16.020

Why does JavaScript allow array syntax to access properties?

It isn't "array syntax".

Square brackets are a standard way to access the properties of an object.

Arrays are just a type of object.

Square bracket notation has some advantages over dot notation for accessing properties:

You can use any expression to define the name, including variables and function calls.
You can access properties which have names that are invalid in an identifier (such as those which start with a number, which is why you commonly see them used to access arrays).

It's also more verbose and potentially less efficient.

the actual distinction between an associative array and a JavaScript object is, at a minimum, slightly blurry, and that that's how JavaScript is implementing object properties "under the hood"

JavaScript doesn't have a feature called "associative arrays". (W3Schools is not a trustworthy source).

It has objects, which are (at their core) collections of property:value pairs. (This is similar to PHP's associative array feature).

It has arrays, which are objects which inherit from the Array constructor, gaining methods like forEach and properties like length (which uses a getter function to determine its value based on the properties with a name that is the highest integer value).

Why does JavaScript allow array syntax to access properties?

1 Answers1

Linked