console.log(my_array) vs console.log(my_array.toString())

The console is a little misleading. They may look the same, but under the hood they're different. When you use console.log to print out an array -- console.log(my_array) for example -- Chrome takes all the array items and prints them out in a nice little string like this:

[1, 2, 3]

The [ ] indicate that it's an array object. However, it's still an array full of individual items -- it's just that Chrome writes them out to the console in a friendly way

However, when you use the .toString() method you're literally taking the array and turning it into a single string that contains the values of each array item. In other words, you end up with a string, not an array.

I already understood what you wrote but that is not what I meant to say. I tried that to explain into my example.

Into the video they demonstrated a bug into the console but I don't get that into my browser as it seems to be fixed.

Hi Gerald. Sorry I didn't understand your question at first. What Jim is saying in the video is that, due to a bug in how the console works, it you log an array, then change the array, then log it out again, the first log will show the changed array. Try this code:

var myArr = [1,2,3];
console.log(myArr);
myArr.push(4);
console.log(myArr);

You'll see that the first console log will show that the array is 1,2,3,4, even though the array is modified AFTER that first log.

Now try this:

var myArr = [1,2,3];
console.log(myArr.toString());
myArr.push(5);
console.log(myArr.toString());

You'll get two strings -- 1,2,3 and 1,2,3,4 -- which is now correct.

With console.log(myArr) I get two different strings as well.

So if I try this

var my_array = [2, 3, 4]; console.log(my_array);

my_array.push(5); console.log(my_array);

I get two different output results: [2, 3, 4] and [2, 3, 4, 5]

Are you typing these directly into the console? If so, you won't see this problem. But if you put these lines of code into a web page then view in the browser, you'll see the console printing out incorrectly:

var myArr = [1,2,3];
console.log(myArr);
myArr.push(4);
console.log(myArr);

I've tested this in latest build of Chrome.

I put these lines of code into a script file that I linked to a web page. Exactly like Jim demonstrates into the video.

I rhink you still misunderstand my point.

All what I meant to say is that I don't experience that quirky behaviour of the console that Jim is talking about into the video.

So I suggest that this has been fixed with a later version of Chrome than Jim was using during his video record.

Yes, it is.

I tested the code below into Firefox, Chromium and Chrome under Linux Mint and Firefox under Windows 7. The results are the same.

Code from arrays.js:

var my_array = [2, 3, 4]; console.log("console.log(my_array): "); console.log(my_array); console.log("console.log(my_array.toString()): " + my_array.toString());

my_array.push(5); console.log("console.log(my_array): "); console.log(my_array); console.log("console.log(my_array.toString()): " + my_array.toString());

Both console.log(my_array) and console.log(my_array.toString()) outputs the same array elements:

console.log(my_array): [2, 3, 4] console.log(my_array.toString()): 2,3,4 console.log(my_array): [2, 3, 4, 5] console.log(my_array.toString()): 2,3,4,5