console log object inside object after changing value in javascript

Question

Why is this happening?

var test_obj = {
    test: {}
};

test_obj.test.a = "hi";
console.log(test_obj);     // 1 a is 'hi'
test_obj.test.b = "bye";
console.log(test_obj);     // 2 b is not 'bye' but empty object
test_obj.test.b = {};

The console.log results are not expected for test_obj.test.b. Why is this happening, is printing console.log asynchronous?

This confused me because I have mousedown to do test_obj.test.b and console.log it, and mouseup to do test_obj.test.b = {}. I expected to find test_obj.test.b and its value, but both the key and value are not there. Also, .test.b also shows in the first console.log.

What can I do to make it what I expect?