JSFiddle - React, Tailwind, and code Playground

by Chase Wilson

HTML

<div id="catcher"></div>

CSS

#catcher {padding: 5px; margin: 10px; border: 2px #ccc solid;}

JavaScript

/* 
*  Example uses Mootools.
*  Mootools is cootools.
*  http://www.mootools.net
*/
var catcher = document.getElementById('catcher');

/* wicked defined in the global scope. */
var wicked;

var newFunction = function(){ 
// start newFunction scope...
    
    /* localVariable is only accessible within the newFunction scope */
    var localVariable = "<p>Hello. I'm nested.</p><hr />";
    
    /* 
    *  wicked assigned within nested function 
    *  but because the function itself is declared 
    *  within the newFunctions's scope, we get access
    *  to all the local variables that live here
    */
    wicked = function(){
        catcher.set('html', localVariable);
        return true;
    };
    
    // notWicked is defined within the
    // newFunction scope
    var notWicked = function() {
        catcher.set('html', localVariable);
    };
// end newFunction scope...
}();

if(typeof wicked == 'undefined'){ // if I can't see wicked()
    var msg = '<p>wicked() is outside my scope.</p>';
    catcher.set('html', catcher.get('html') + msg);
} else {
    wicked();
}

if(typeof notWicked == 'undefined'){ // if I can't see notWicked()
    var msg = '<p>notWicked() is outside my scope.</p>';
    catcher.set('html', catcher.get('html') + msg);   
} else {
    notWicked();   
}