JSFiddle - React, Tailwind, and code Playground

by f0t0n

HTML

<ol id="res"></ol>

JavaScript

var list = document.getElementById('res');

function log(line) {
    var li = document.createElement('li');
    li.innerHTML = line;
    list.appendChild(li);
}

function sayHello() {
    log('Saying hello from GLOBAL scope');
}

// in global scope:    
(function(app) {

    app.log = log;

    app.doWork = function() {
        app.log('doing a work');
    };
    
    // In this way you can call the methods of your "app" 
    // object only inside the scope of this anonymous function:
    app.doWork();

    // This function has same name
    // as the global sayHello function has. It's a local redefinition.
    // If we'll comment it then the global sayHello function will be used instead.
    function sayHello() {
        app.log('Saying hello from "PRIVATE" scope');
    }
    
    // Calling LOCAL sayHello function visible from current scope:
    sayHello(); // Saying hello from "PRIVATE" scope
})({});

// None from outside knows about your "app" object and it's methods/properties

log("type of 'app' is " + typeof(app)); // undefined

// Calling GLOBAL sayHello function:
sayHello(); // Saying hello from GLOBAL scope