-1

I want to make my code more clear, that the reason i am trying to learn namespaces or nested functions. I've read about them in several places and as i understood 'Revealing Module' is the best option. So i tried to copy second example from this post namespace.

At first, i got the error when trying to return object with two methods: Unexpected token ':'. When i tried to return one method instead of 2, i got the Cannot read property of undefined error when tried to call applyEvents of expandableElements object.

let expandableElements = 
(
    function() 
    {
        // All expandable elements
        let expands = document.querySelectorAll(".expand-icon");

        // Apply events to all .expand-icon elements
        function applyExpandEvents()
        {
            for(let i = 0; i < expands.length; i++)
            {
                expands[i].addEventListener("click", expandList);
            }

            // Expand method
            function expandList() 
            {
                this.classList.toggle("active");
                let content = this.previousElementSibling;

                if (content.style.maxHeight)
                {
                    content.style.padding = "0";

                    content.style.maxHeight = null;
                } 
                else 
                {
                    content.style.padding = "1rem";
                    content.style.paddingBottom = "0.5rem";

                    content.style.maxHeight = content.scrollHeight + 20 + "px";
                } 
            }
        }


        // Close all expanded lists
        function closeAllExpands()
        {
            for(let i = 0; i < expands.length; i++)
            {
                let expand = expands[i];

                if(expand.classList.contains("active"))
                {
                    expand.classList.toggle("active");

                    expand.previousSibling.style.padding = "0";
                    expand.previousSibling.style.maxHeight = null;
                }
            }
        }

        return 
        {
            applyEvents : applyExpandEvents,
            closeAll    : closeAllExpands // Unexpected token ':'
        };
    }
)();

expandableElements.applyEvents(); // If remove closeAll from return, then'Cannot read property applyEvents of undefined'
reymon359
  • 1,240
  • 2
  • 11
  • 34
Nar Jovan
  • 85
  • 10

1 Answers1

1

The return and the JSON must be on the same line. As soon as the return line is executed, the control is handed over to the caller (with undefined) and the JSON line never get executed.

do it like this:

...
        return {
            applyEvents : applyExpandEvents,
            closeAll    : closeAllExpands // Unexpected token ':'
        };

Detailed Explanation from MDN docs about return:

The return statement is affected by automatic semicolon insertion (ASI). No line terminator is allowed between the return keyword and the expression.

return
a + b;

is transformed by ASI into:

return; 
a + b;
Tibebes. M
  • 6,940
  • 5
  • 15
  • 36