Why does the isArray() Javascript method in this example returns true, if the array has been redefined as a standard object?

Question

I'm trying to learn Javascript - here's my issue:

In the w3schools.com javascript array examples, they show the sequent example:

    var person = [];
    person["firstName"] = "John";
    person["lastName"] = "Doe";
    person["age"] = 46; 
    document.getElementById("demo").innerHTML =
    person[0] + " " + person.length;

An array "person" has been defined, but then they proceed to add some elements whit a "named" index. Then tries to print the HTML document the 0th element and the number of elements of the array, like you would do with a standard array.

The description says:

If you use a named index when accessing an array, JavaScript will redefine the array to a standard object, and some array methods and properties will produce undefined or incorrect results.

In fact, person[0] and person.length return respectively "undefined" and "0". Even is person was initially defined as an array, by inserting new named indexes elements, the array should be redefined as an object. But when i try do use the Array.isArray() method for checking it, it returns true:

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46; 
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;

document.getElementById('test').innerHTML = Array.isArray(person);// returns true

So, why? if, as specified by the tutorial, this has been effectively redefined as a standard object, and the ECMAScript 5 has added the .isArray() method for checking if something is an array and nothing else, shouldn't this return false insted of true?

I'm sure i missed something. If i define person like this:

person = {};

then it returns false, as expected. What is happening here? I just wanted to understand arrays a little bit more, this confuses me. Is this just a broken array, but still an array?

Here's the example (without the Array.isarray() bit, just the default): https://www.w3schools.com/js/tryit.asp?filename=tryjs_array_associative_2

Answer 1

First of all I want to note that the example you took from the w3schools page on arrays, is from the "Associative Arrays" section, which has this important introduction:

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.

This puts the example into context, because it really makes no sense to define a variable as an array and then use string keys. But this was an example to illustrate the point.

Does an Array become an Object?

That JavaScript still considers the variable to be an array is as expected. It becomes an array at the moment of assignment of [], and that does not change by adding properties to that object. Yes, arrays are objects. They just have additional capabilities.

The array did not lose any of its array-like capabilities, but those features just don't work on those string properties, ... only on numerical ones (more precisely, the non-negative integer ones).

You loosely quoted the following statement from w3schools:

If you use named indexes, JavaScript will redefine the array to a standard object.

That is wrong information and leads to your misunderstanding. There is no redefinition happening. When you add properties to any object, then the object does not change "type". It remains an instance of what it was before... An array remains an array, a date object remains a date, a regex object remains a regex, even if you assign other properties to it. But non-numerical properties do not "count" for an array: the length will remain unchanged when you add such properties. The length only reveals something about the numerical properties of the object.

This quote is yet another illustration of what the JavaScript community thinks about w3schools.com, i.e. that it is not the most reliable reference, even though it has its value for learning the language.

Example of adding useful properties to arrays

Having said the above, there are cases where you may intentionally want to make use of such properties on arrays. Let's for example think of an array of words that is sorted:

const arr = ["apple", "banana", "grapefruit", "orange", "pear"];

Now let's add something to this array that denotes that it is currently sorted:

arr.isSorted = true;

We could imagine a function that would allow one to add a value to this array, but which also verifies if the array is still sorted:

function addFruit(arr, fruit) {
    if (arr.length && fruit < arr[arr.length-1]) {
        arr.sorted = false;
    }
    arr.push(fruit);
}

Then after having added several values, it would maybe be interesting to verify whether the array needs sorting:

if (!arr.sorted) arr.sort();

So this extra property helps to avoid executing an unnecessary sort. But for the rest the array has all the functionality as if it did not have that extra property.

Answer 2

I think the polyfill implementation of isArray() will clear your doubt by some extent. #Polyfill

Answer 3

An object that is set up as an array and then filled as an object becomes a member of both classes. Methods of the Array class will apply to its 'array-ness':

Array.isArray(person);

returns true. Methods of the Object class will apply to its 'object-ness':

typeof(person);

returns object. When it could be either one, the 'array-ness' will prevail, because the variable was first defined as an array:

console.log(person);

will put Array [ ] on the console, because it runs the Array class's logging method. It is displayed as an empty array, since it has no numbered elements, but you could add some:

person[2]=66;

and then console.log would log Array [ <2 empty slots>, 66 ].