Why does the list get printed first as a list

I added some code to explore a difference I saw in an earlier exercise. My question is why does the list get printed first as a list with each element on their own line then I print the list again and it doesn’t put each element on its own line. See screenshot…

this very likely has to do with the UI of codecademy, how the list are displayed.

Are you saying it’s completely random and unpredictable? I wonder if it’s only a difference between printing the array without changing its initial form, then acting upon it (in this case, using the .pop() method) and then printing it again. The same thing happened in an earlier exercise as well. What do you think?

Won’t speak for @stetim94, just for what is promised by JS with respect to the .pop() method. There is nothing random about it since we know it will be the last element of the array that gets returned, and that it will also be removed from the array.

Your screenshot is exact evidence of this behavior.

It’s important to note that the value popped is still in play. We always capture it for use in the current program state.

next = array.pop()

Now we can do something with next. And, the array is that much smaller.

I agree. However, my question is why does the first array print out line by line and the second one, after using the pop() method, print out on one line consecutively, only to go to the next line when it runs out of room on the first line. The only difference is the fact that the first time the array is printed, it is in its original, untouched, state. Then, after I execute the pop() method on that array and use the exact same console.log() command to print it, it then prints out on one line instead of separate lines for each element in the array. Does that make sense?

That would require a solid understanding of the inner workings of console.log(). It streams character data to the console, that much we know. It is not asynchronous so keeps multiple calls in a stack until there are no more, then streams them all.

Short of very simple tabular output, or the use of a template literal, don’t try to predict how the content will display. And, it will vary from platform to platform, since like HTML, etc. there are only recommendations for what the API should promise. Each vendor is still at their own liberty.

Bottom line, console.log is for developers, not users. We have HTML and DOM manipulation for them. Care not what the output looks like in the console, just what it is composed of. Is the correct data being logged?

Fair enough, thank you for reminding me that console.log() is designed for developers. I had lost my perspective and now I can move on to continue learning JS without worrying about the little details contained in my question. Thanks again you were very helpful.

1 Like

Are there still details that need consideration?

It kind of made sense to me tbh. What I think they are doing is to see if we can distinguish what needs to be done by recalling what we learned from behind. For example, in the exercise, we know that the variable declaration for the .pop() method is not necessary, but they put it there in their own example only as a ‘by the way, did you know that…’ and let us figure out how to to do the exercise. But that is just my opinion.

If the lesson does not explain what the return values of .push() and unshift() then it should have, imho.

const arr = [4,5,6]
console.log(arr.push(7))       //  4
console.log(arr.unshift(3))    //  5

The return value represents the new length of the array.

.pop() and .shift() both return the value just taken off the array.

let s, p;
console.log(s=arr.shift())    //  3
console.log(p=arr.pop())      //  7

Assigning to a variable lets us re-use the value more than once.

1 Like

Well, they provided us with the documentation for us to see all the other array built-in methods and only allowed us to test a few. Nobody is stopping us from experimenting with the other methods as well! :wink:

1 Like

Thanks guys, that was very helpful. I appreciate that you can bring the ‘techspeak’ down a notch so I can understand. Thanks again.