Function and function group with same name in javascript object

Question

I have following object in JavaScript . I am confused in how to access object.demo() and object.demo.inner() . The object.demo.inner() worked fine but object.demo is not working. I have the requirement that the name should be same. Why is the function not overloading here?

var object = {
    // object.demo()
    demo: function(str, pathStr) {
        console.log('function 1')
    },

    demo: {
         // object.demo.inner()
        inner: function () {
            console.log('inner')
        }
    }
}

object.demo.inner() //working
object.demo() //not working

Answer 1

Function is an object in javascript so it can have other properties. So you can assign inner function to a property of object.demo object:

var object = {
    // object.demo()
    demo: function(str, pathStr) {
        console.log('function 1')
    }
}

// object.demo.inner
object.demo.inner = function () {
    console.log('inner')
}

Answer 2

Actually there is no function object.demo , because you are overwriting the same object with another object. This behaviour is prohibited in ES5 with 'strict mode' , but not in ES6.

You could take the outer object and assign the function to the inner property later.

 var object = { demo: function(str, pathStr) { console.log('function 1') } }; object.demo.inner = function () { console.log('inner'); }; object.demo.inner(); object.demo();