strange js anomaly

strange js anomaly

by Jamie Pratt -
Number of replies: 7

Am learning more deeply about JS and YUI in order to make dynamic elements for a form that is for defining a question type with drag and drop images. But this is essentially a js question with no knowledge of the filepicker required.

I want to hook into the js for the filepicker.

But playing about with the code I am very puzzled that what I see in the console.log does not necessarily correspond to the variable contents available at the time.

For example if I edit repository/filepicker.js :

 



M.core_filepicker = M.core_filepicker || {};

/**
 * instances of file pickers used on page
 */
M.core_filepicker.instances = M.core_filepicker.instances || {};
console.log(M.core_filepicker.instances);

The console does not output an empty object but outputs an object with the 7 initialised filepicker helper instances I am using later on the page!

Strange. It seems anywhere after the object is created console thinks it has properties. Before the initial assignment I get an error saying instances is not defined.

What am I not understanding about JS scope or execution sequence?

Jamie

Average of ratings: -
In reply to Jamie Pratt

Re: strange js anomaly

by Jamie Pratt -

If I add the following loop immediately after the the console.log call in the loop does not get called at all! At the time the console.log call is made there are no properties.

 

M.core_filepicker = M.core_filepicker || {};
/**
 * instances of file pickers used on page
 */
M.core_filepicker.instances = M.core_filepicker.instances || {};
console.log(M.core_filepicker.instances);
//added this for loop
for (var instance in M.core_filepicker.instances) {
console.log(instance);
}
 

It seems that console.log cannot be relied upon.

What I would conclude is happening is that the actual display of the log is happening later at a time when the M.core_filepicker.instances has been initialised and assigned. Perhaps this is happening as the M.core_filepicker.instances are being initialised before the console has been fully set up???

Jamie

 

Average of ratings: -
In reply to Jamie Pratt

Re: strange js anomaly

by Jamie Pratt - 
test = {};
console.log(test);
test.hello1 = "hello";
(function(){
    console.log(test);
})();

test.hello2 = "hello";
(function(){
    console.log(test);
})();
test.hello3 = "hello";
(function(){
    console.log(test);
})();
 

Outputs :

 

Object
  1. hello1: "hello"
  2. hello2: "hello"
  3. hello3: "hello"
  4. __proto__: Object
test.js:9
 
Object
  1. hello1: "hello"
  2. hello2: "hello"
  3. hello3: "hello"
  4. __proto__: Object
test.js:14
 
Object
  1. hello1: "hello"
  2. hello2: "hello"
  3. hello3: "hello"
  4. __proto__: Object
test.js:18
 
Object
  1. hello1: "hello"
  2. hello2: "hello"
  3. hello3: "hello"
  4. __proto__: Object
Interesting, I guess this is a bit of an oddity with Chrome. Firefox does what you would expect here, although it doesn't with the previous example.
If I set a break point in the code then it does show the contents of the property you would expect. It seems that console.log doesn't always work properly with code in closures.
Jamie
Average of ratings: -
In reply to Jamie Pratt

Re: strange js anomaly

by Dongsheng Cai -

I just tested this with alert().

It works as expected on chrome and firefox, seems console does something different in chrome(probably safari too).

It's very good finding, tells us don't rely on console too much smile

 

Thanks.

Regards,

Dongsheng

Average of ratings: -
In reply to Dongsheng Cai

Re: strange js anomaly

by Jamie Pratt -

Thanks for your response Dongsheng.

The javascript console seems such a useful tool. Learning about js scope and closures and all of that and then having this issue had me very confused but this is definitely a bug in console and not something I am misunderstanding, I see now.

I think what does seem to be fairly reliable is to use breakpoints and then examine the variable contents at that time. That seems to work great.

Average of ratings: -
In reply to Jamie Pratt

Re: strange js anomaly

by Dongsheng Cai -

Hi Jamie

What moodle page are you testing? I am not sure how console.info works in browsers, have you tried to use alert()?

for (key in M.core_filepicker.instances) {

    alert(key)

}

Average of ratings: -
In reply to Dongsheng Cai

Re: strange js anomaly

by Jamie Pratt -

Was testing my own custom form. But it would not matter which form you tested it on, you would see rather confusing results if you put a console.log call in like I did in repository/filepicker.js or I would guess in many places in code where we are using closures in this modern YUI style.

Average of ratings: -