Short answer

It's because when you put console.log(object) the browser saves a pointer and not the value of the object.

You're seeing the value you have in the object at the time you're looking and not at the time the console.log was executed.

Long answer

When doing console.log(variable) , the browser puts the value of the variable on the console stack. When the variable is not an object (that is type number , string , boolean , etc) that value is stored, when the variable is an object the memory address of that object is stored.

What you see when you inspect the console is the current state of that object (either a Object or a Array or similar).

So if what you want is to show the current state of the object you will have to use a library that passes the object to text. Beware of JSON (the functions show them as null and the dates as a string). Depending on what you want to show, you must use one or another library.

Another alternative is to put a "breakpoint" in the code to show you the current value simply because you interrupt the code at the time you are interested.

Demonstration

For those who do not think this works like this (at least in Chrome) you can try it by putting the following code in a file.html

<p>Prueba</p>
<script>
var object={}
console.log("antes");
console.log(object);
console.log("despues");
object.algo="ahora tiene algo";
</script>

Then double-click on the file (if they have chrome as the default browser) if they do not put it in the address bar. Then press F12 go to the console tab, open where they say object and you'll see something like this:

Curiosities (and precisions)

In Chrome when typing commands in the console, the console.log shows a summary of the content next to the type (Object). Thanks to that you can see the value that an object originally had. But if the arrow to look at the content is touched after changing the object what is shown will be the new and not the original.

It seems that the precise behavior is: when you expand an object in the console of Chrome shows the content that you have when you expand it for the first time: link

The question is very broad, and more so when they never give the definition of the object, however I will answer some possible reasons why the code does not work correctly as expected.

Possible causes

Quoting the code

console.log(object); // si muestra valores
console.log(Object.keys(object).length); //muestra 0
console.log(object['9']); //muestra undefined

Exemplifying

Object.keys returns all properties enumerables so if 9 and 10 are not enumerable, and are the only properties defined in object then Object.keys(object) will return an array of 0 elements, for more information see here

Suppose that the definition of object is the following

var object = Object.defineProperties({},
{
    '9': {enumerable: false, get: function(){ return 'soy 9' }},
    '10':{enumerable: false, get: function(){ return 'soy 10'}}
})

As you can see 9 and 10 are non-enumerable properties, (no need to define it, because by default all property is created as non-enumerable and not configurable unless otherwise specified, so include enumerable: false is redundant and only for didactic purposes)

Object.keys(object).length // 0

The previous line returns an empty array since object has only properties no enumerables , so Object.keys(object).length is 0

for (var key in object) {
    console.log(object[key]) // no hace nada
}

The previous for..in does nothing, since for..in only iterates on enumerable properties, see here

object["9"] // 'soy 9'
object["10"] // 'soy 10'

However, if you can access these properties, so it can not be due to a wrong browser, unless it is clear that 9 and 10 return undefined when doing get