JavaScript hoisting example reloaded


Dev-Bookmarks Logo

(P) Bookmarks.dev - Open source Bookmarks and Codelets Manager for Developers & Co. See our How To guides to help you get started. Share your favorites bookmarks with the community and they might get published on Github - Star


<head>
<title>Hoisting example</title>
</head>
<body>
    <h1>Hoisting in action</h1>
    <script type="application/javascript">
        var hoisting = "global variable";
        alert("global 'hoisting' var => " + hoisting);
        (function(){
            alert("local 'hoisting' var (BEFORE declaration WILL NOT PICK its global 'shadow' -> undefined !) => " + hoisting);
            var hoisting = "local variable";
            alert("local 'hoisting' var (AFTER declaration WILL HIDE its global 'shadow' -> assigned value !) => " + hoisting);
            // block
            {
                var hoisting = "block variable";
                alert("block 'hoisting' var (AFTER declaration WILL OVERRIDE its local 'shadow' -> assigned value !) => " + hoisting);
            }
            // after block
            alert("local 'hoisting' var REPLACED AFTER BLOCK with its block 'shadow' => " + hoisting);
            // THE moral
            alert("The Hoisting MORAL: ALL local variables (even from blocks) are pre-defined/hoisted by JavaScript Runtime in front of the method body !\nDYI to make it clear !");
        })(); //self-executing function 
    </script>
</body>

Thank you Dev{eloper} Stonez (@devstonez) for the tip.

Subscribe to our newsletter for more code resources and news

How to verify element click in div with Angular

Demo and code showing how to verify an anchor was clicked in Angular. Based on use case for www.bookmarks.dev Continue reading