Strange browser js console behavior [duplicate] - javascript

This question already has answers here:
console.log() shows the changed value of a variable before the value actually changes
(7 answers)
Is Chrome’s JavaScript console lazy about evaluating objects?
(7 answers)
console.log() async or sync?
(3 answers)
Weird behavior with objects & console.log [duplicate]
(2 answers)
Closed 7 months ago.
Hey mods the other question you linked had nothing to do with mine. Even on that questions page it says that the behavior doesn't exist anymore.
To preface, this isn't an issue with the variable i in the closures all being the same although it might look like it is.
The following code has a weird behavior. Basically the code runs the body of a for loop 3 times where it creates a set timeout that modifies and logs the same array.
const obj = {a:1,b:{c:2}};
console.log(obj);
obj.b.c = 3;
I expected when expanded the log would show that c was 2, but it actually shows that c is 3.
Why does this happen?
(I already answered below)

What is happening is that when you console.log a object only the first level of properties are stored before expanding in the console(clicking the > on an object property and seeing its properties). Think about the alternative, you deep copy every object that is logged. Then because of properties like __proto__ and constructor you would have to copy many many items. And if the object happens to have some reference to window you would practically have to take a memory snapshot.

Related

Strange console.log behaviour with object and it's field [duplicate]

This question already has answers here:
console.log() async or sync?
(3 answers)
Is Chrome’s JavaScript console lazy about evaluating objects?
(7 answers)
Closed 1 year ago.
I have the strange behavior (as i think) of console.log. So, there is two console.log in my console, first shows PdfViewerApplication object, second shows it's fieid, named eventBus.
So, as you can see second line says that PdfViewerApplication.eventBus right?
Now lets look at first line (before! second) , expand the body of the object and find eventBus field.
Obviously it is not null there, it almost has 2 eventListeners (pagesloaded)!
How is it possible?

The same array has different lengths? [duplicate]

This question already has answers here:
Is Chrome’s JavaScript console lazy about evaluating objects?
(7 answers)
console.log(array) returns filled array, but console.log(array.length) is 0? [duplicate]
(1 answer)
Closed 3 years ago.
Can someone please explain to me, because I don't understand something here, why the same array has two lengths? I assume I understand something wrong here, it must have the same length, right?
I have this call:
console.log(eventsBeforeRender);
console.log(eventsBeforeRender.length);
and in browser console i see this:
What I want to achieve, is to access the element [0] of the root array, so then from this element I can access other elements, of which from what I see there should be 17.
Calling this:
console.log(eventsBeforeRender[0]);
returns undefined.

Javascript objects returns different values for a field when printed individually or whole [duplicate]

This question already has answers here:
console.log() async or sync?
(3 answers)
console.log() shows the changed value of a variable before the value actually changes
(7 answers)
Closed 3 years ago.
I have the following javascript line:
console.log({fieldMeta__value: fieldMeta.value, fieldMeta: fieldMeta});
As you can see, I am printing to console the object fieldMeta and, also, its field value. The problem is that its field value (fieldMeta.value) returns 1, but the whole objects prints the content for value as undefined:
I am pretty sure I have some flaw in my logic, but I can't find it.
EDIT
I tried another approach for printing the values:
console.log(fieldMeta);
console.log(fieldMeta.value);
And I got the same result:

Override String Representation of an Array in JavaScript for Console Log [duplicate]

This question already has answers here:
adjust console.log behaviour of custom object
(3 answers)
How to change string representation of objects in Nodejs debug console view
(5 answers)
Closed 3 years ago.
I was hoping I could override what is displayed by console.log. I was assuming the below:
const arr = ['ben', 'john', 'amy'];
Array.prototype.toString = function(){return 'alex';}
console.log(arr); // hoping this could result in 'alex' being printed to the screen. Prints the array.
I was hoping I could make the array print my 'alex' override to the screen but it looks like that is not how console.log works. The toString function must not be was is used to determine the log. Does anyone know how this is determined or if it can be overridden?

Why does console.log output modified values even before they have been modified? [duplicate]

This question already has answers here:
How can I make console.log show the current state of an object?
(12 answers)
Closed 7 years ago.
In Chrome 39 developer tools, this code:
var something = [
{x: 'foo'},
{x: 'foo'}
];
console.log(something);
something.forEach(function (element) {
element['x'] = 'baz';
});
... outputs:
Why does console.log output modified values even before they have been modified?
A similar question from 2012 explains that due to a chromium bug, console.log is "delayed" (does not stringify the input object immediately). But the bug is marked as fixed, so why is this still happening several years later?
It doesn't.
When you output an object with console.log, the object is output "by reference"; the values in the console are dynamic, and they will update to reflect the current state of the object.
If you want to output a static string of text about the object, use console.dir
Whenever you click on the array of objects, it shows you the updated objects, and not a snapshot of how they looked when you did the console.log.
Think of it as an array of references to the corresponding objects.

Categories

Resources