Error while trying to call variable from another file in js

I am using a page object model. So each page.js file contains a variable url and ‘AddButtonId’. I call the function to launch the page by passing the pageName and elementID.

page.js

module.exports = {
    e: {
        url: 'http://localhost:4200/',
        AddButtonId: 'addButton',

},
};

function definition:

urlCall: function (pageName) {
          return  browser.get(pageName+".e.url");
        },

clickButton: function(pageName,elementID){
             var x = pageName+".e."+elementID;
             element(by.id(x)).click();
            },

here I pass pageName and ID while calling the function.

    urlcall(page);

    clickButton(page, AddButtonId);

But instead of getting the variable value (e.g. https://www.google.com) from the page object file, the browser.get() tries to load “pageName.e.url”.
Instead of passing “addButton” in “clickButton” function, it passes “page.e.AddButtonId” and fails with the error ” NoSuchElementError: No element found using locator: By(css selector, *[id=”page.e.AddButtonId”])”

Error while trying to call variable from another file in js