Why does console.log display array different than alert?

Question

I wrote a function that filters objects in a specific manner (grouped by key but only consecutive ones, it works fine).

groupBySequentialValues(array, key) {
    let groupName = null;
    let groupIndex = 0;
    let result = []; // keep this in mind!

    array.forEach((el, index) => {
        if (groupName !== array[index][key]) {
            groupName = array[index][key]
            groupIndex++;
            result[groupIndex + '_' + groupName] = []
        }
        result[groupIndex + '_' + groupName].push(el);
    })

    alert(result);
    console.log(result);
}

At first the alert shows an empty array, but after the alert is closed, the console log will show the correctly assembled array. (This also happends without the alert of course, this just shows the difference the best)
But I cannot use this array in alerts or in the template (I use it in VueJS to render a list, but its empty like I said).

Somehow dev tools seems to see its contents but alert/the dom doesnt.
After declaring the result array as an object ({} instead of []) it worked.

Why does dev tools/console log behave this way? Its a debug tool, but when it behaves like this I cannot rely on it as a debugging tool..

Answer 1

When constructing an object and printing that object to the console, console.log() will output the object's own properties and their values. If you console.log() the object using the object's .toString() method you will receive [object Object] in the console. This is the exact result you see in the alert of the object:

const obj = {};
obj['test'] = 'this is a test';
console.log(obj);
console.log(obj.toString());
alert(obj);

If you create an array and console.log() its internal toString() method prints the elements of the array comma separated with [] surrounding them. When alert()ing an array, the .toString() method is used to print only the array values:

let arr = [1,2,3];
console.log(arr);
alert(arr);

Finally, your code adds properties to an Array Object rather than adding elements to the array. When this occurs, console.log() prints this Object exactly like the first example, but because this is an Array Object, it places [] around the properties and their values rather than {}. Since the array is empty (no elements), it prints [] literally.

The code below demonstrates the structure of the Array Object your code creates, shows the number of array elements is zero, shows the Array Object's property names, shows the value associated with that property and finally shows the object in the console.

If you alert the result as explained in the previous example, the dialog will be empty because there are no elements in the array.

let groupName = 'test';
let groupIndex = 0;
let el = 'this is a test';
let result = [];

result[groupIndex + '_' + groupName] = []
result[groupIndex + '_' + groupName].push(el);

console.log('Number of elements in result array: ', result.length);
console.log('result Object Property Names: ', Object.getOwnPropertyNames(result));
console.log('result Object Property Value: ', result[Object.getOwnPropertyNames(result)[1]]);

console.log(result);