JavaScript: console.log() gives different results than alert()

Question

Is console.log() supposed to print out the value of a variable at the time it's called in your JavaScript? That was my assumption but when I run the code below in either Firefox (using Firebug) or Google Chrome (and use the built-in dev tools), I seem to get the "final" value of an array rather than the value of the array at that time. If I use alert() statements they print out what I would expect - the value of an array at the time the alert() statement is called.

var params = new Array();
var tmp = new Array('apple', 'banana', 'cat');

for (var i=0; i < tmp.length; i++) {
    params[tmp[i]] = [];
}

console.log(params);
/*
SHOWS IN CONSOLE:

- []
+ apple             ["jan", "feb", "mar", "apr"]
+ banana            ["jan", "feb", "mar", "apr"]
+ apple             ["jan", "feb", "mar", "apr"]
*/

alert( print_arr(params) );
/* 
ALERT BOX TEXT:

[apple]:
[banana]:
[cat]:
*/

console.log('===========================================');

var tmp2 = new Array('jan', 'feb', 'mar', 'apr');
for (var i=0; i < tmp.length; i++) {
    for (var j=0; j < tmp2.length; j++) {
        params[tmp[i]].push(tmp2[j]);
    }
}           

console.log(params);
/*
SHOWS IN CONSOLE:

- []
+ apple             ["jan", "feb", "mar", "apr"]
+ banana            ["jan", "feb", "mar", "apr"]
+ apple             ["jan", "feb", "mar", "apr"]
*/

alert( print_arr(params) );
/* 
ALERT BOX TEXT:

[apple]:jan,feb,mar,apr
[banana]:jan,feb,mar,apr
[cat]:jan,feb,mar,apr
*/

function print_arr(arr) {
    var str = '';
    for (var k in arr) {
        str += '[' + k + ']:' + arr[k].toString() + "\n";

    }

    return str;
}

console logs the object, so any changes made to the object will get reflected in the logged objet — Arun P Johny, Mar 20 '13 at 15:49
Why do you create an array and fill it with properties instead of values? Why not use Object instead? — newtover, Mar 20 '13 at 15:53
A small comment on your coding style: Do not use new `Array(a,b,c)` but `[a,b,c]`. It is easier on the eyes and the identifier does not have to be looked up. — Kijewski, Mar 20 '13 at 15:53
[Is Chrome's JavaScript console lazy about evaluating arrays?](http://stackoverflow.com/questions/4057440/is-chromes-javascript-console-lazy-about-evaluating-arrays) — Andreas, Mar 20 '13 at 15:54
more over in your case params is not used as array it is used as an hash obect ex: `var params = {}` — Arun P Johny, Mar 20 '13 at 15:55

score 8 · Accepted Answer · answered Mar 20 '13 at 15:57

As I said in the comments console.log(obj) does not log a string representation, it logs a reference to the actual javascript object in the memory. So any changes made to the object will get reflected in the logged instance.

If you want to trace the progressive changes made, then convert the object to a string and print to like console.log(JSON.stringify(params)).

Also you are not using params as an array, you are using it as an map. so change params to an object var params = {}

Change params to an object and use JSON.stringify to log it

var params = {};
var tmp = new Array('apple', 'banana', 'cat');

for (var i=0; i < tmp.length; i++) {
    params[tmp[i]] = [];
}

console.log(JSON.stringify(params));
/*
SHOWS IN CONSOLE:

- []
+ apple             ["jan", "feb", "mar", "apr"]
+ banana            ["jan", "feb", "mar", "apr"]
+ apple             ["jan", "feb", "mar", "apr"]
*/

alert( print_arr(params) );
/* 
ALERT BOX TEXT:

[apple]:
[banana]:
[cat]:
*/

console.log('===========================================');

var tmp2 = new Array('jan', 'feb', 'mar', 'apr');
for (var i=0; i < tmp.length; i++) {
    for (var j=0; j < tmp2.length; j++) {
        params[tmp[i]].push(tmp2[j]);
    }
}           

console.log(JSON.stringify(params));
/*
SHOWS IN CONSOLE:

- []
+ apple             ["jan", "feb", "mar", "apr"]
+ banana            ["jan", "feb", "mar", "apr"]
+ apple             ["jan", "feb", "mar", "apr"]
*/

alert( print_arr(params) );
/* 
ALERT BOX TEXT:

[apple]:jan,feb,mar,apr
[banana]:jan,feb,mar,apr
[cat]:jan,feb,mar,apr
*/

function print_arr(arr) {
    var str = '';
    for (var k in arr) {
        str += '[' + k + ']:' + arr[k].toString() + "\n";

    }

    return str;
}

Demo: Fiddle

This is awesome. Thanks for the tip! I've been struggling to overcome the fact that console.log changes due to references updates, for months now! This is going to change everything! — I Stand With Israel, Mar 04 '21 at 09:38

JavaScript: console.log() gives different results than alert()

1 Answers1

Linked