How can this strange behaviour of console.log() in vue.js be explained?

Question

When I use the first code sample, for some reason console.log() gives me the processed HighData variable. As if the console.log() were at the end of the script.

console.log( "data", this.data['diagram'] );
var HighData = this.data['diagram'];

minSerieHeight = getMin( HighData[3] );
HighData[0] = mkSerie( HighData[0] );
HighData[1] = mkSerie( HighData[1] );
HighData[2] = mkSerie( HighData[2] );
HighData[3] = mkSerie( HighData[3] );

Whats even more strange is, when I use array.map() (which does exactly the same thing as the code above) it returns the this.data['diagram'] variable correctly as expected.

console.log( "data", this.data['diagram'] );
var HighData = this.data['diagram'];

minSerieHeight = getMin( HighData[ HighData.length - 1 ] );
HighData = HighData.map( e => {
    return mkSerie( e );
});

The code is in a Vue component in the mounted() function. The getMin() and mkSerie() are also in the mounted() function.

Answer 1

Console logging an object/array is 'live'. The console just stores a reference to the object. The values of the properties aren't captured until you expand the object in the console, by which time your object will have changed.

JSON.stringify can be useful to capture a string version of the object. As it's a string it can be logged without any risk of it changing. For that to work it does require that the object can be converted to JSON, which is not always possible.

The map example is a bit different. You aren't mutating the same object that was logged. Just assigning a new value to HighData won't change the value seen in the console as that is still pointing at the original object.