when a javascript object property which is an array is accessed directly, it shows as empty

Question

I have the strangest problem and I can't for the life of me figure it out. If I do this:

console.log(settings);

I get this:

Object{
activeImage: 0
containerBorderSize: 10
containerResizeSpeed: 400
fixedNavigation: false
imageArray: Array[58]
imageBlank: "http://www.cappellaniauniromatre.org/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/lightbox/static/jquery.lightbox/lightbox-blank.gif"
imageBtnClose: "http://www.cappellaniauniromatre.org/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/lightbox/static/jquery.lightbox/lightbox-btn-close.gif"
imageBtnNext: "http://www.cappellaniauniromatre.org/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/lightbox/static/jquery.lightbox/lightbox-btn-next.gif"
imageBtnPrev: "http://www.cappellaniauniromatre.org/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/lightbox/static/jquery.lightbox/lightbox-btn-prev.gif"
imageLoading: "http://www.cappellaniauniromatre.org/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/lightbox/static/jquery.lightbox/lightbox-ico-loading.gif"
keyToClose: "c"
keyToNext: "n"
keyToPrev: "p"
overlayBgColor: "#000"
overlayOpacity: 0.8
txtImage: "Image"
txtOf: "of"
__proto__: Object
}

Now if I do this instead:

console.log(settings.imageArray);

I get an empty array!

[]

I know this array has 58 elements, why does it show as empty if I access the property directly? If I try to access any other property directly, I get the correct value. But if I try to access "imageArray", I get an empty array. Why ever could that be?

Answer 1

console.log(settings) puts a live reference to settings into the console. That means that any changes to settings after console.log(settings) will show up in the console.

For example:

var settings = { imageArray: [ ] };
console.log(settings);
console.log(settings.imageArray);
settings.imageArray = [ 'where', 'is', 'pancakes', 'house?' ];
console.log(settings.imageArray);

will give you this in the console:

Object
    imageArray: Array[4]
[]
["where", "is", "pancakes", "house?"]

The first console.log(settings.imageArray) is empty and stays empty because the settings.imageArray reference is replaced.

Demo: http://jsfiddle.net/K4BEs/