Question

I have a function quickbuy_view.checkout()
which accepts a product object.
I call the function with

quickbuy_view.checkout(new Product(12530257))

This is part of the code where a bug arises

console.log('quickbuy_view')
console.log(quickbuy_view)
console.log('quickbuy_view.product')
console.log(quickbuy_view.product)
console.log('quickbuy_view.product.displays');
console.log(quickbuy_view.product.displays);

var display = quickbuy_view.product.displays[0];
//This is where the actual error occurs
$('#quickbuy .display .main img').attr('src',display.vw1Reg)

In chrome’s console I can see that quickbuy_view.product returns an object with an displays array of length 3. However when I attempt to log quickbuy_view.product.displays, an empty array is returned.

The weird thing is, when I later enter quickbuy_view.product.displays, I get the array as expected.

Answer 1

It’s because of the way Chrome Dev Tools console.log works. When you log an object it’s still live, that is it’s not a snapshop of it’s present state. However, when you log a primitive it is the current state of the property.

So the displays array is being set after the code is being logged but when you inspect the product property it is “live” so it doesn’t get updated until you expand it.