Code within parentheses

Question

What’s the difference of writing Javascript code in the following ways:

Original form:

'use strict';

var openCtrl = document.getElementById('btn-search'),
    closeCtrl = document.getElementById('btn-search-close'),
    searchContainer = document.querySelector('.search'),
    inputSearch = searchContainer.querySelector('.search__input');

function init() {
    initEvents();   
}

function initEvents() {
    openCtrl.addEventListener('click', openSearch);
    closeCtrl.addEventListener('click', closeSearch);
    document.addEventListener('keyup', function(ev) {
        // escape key.
        if( ev.keyCode == 27 ) {
            closeSearch();
        }
    });
}

function openSearch() {
    searchContainer.classList.add('search--open');
    inputSearch.focus();
}

function closeSearch() {
    searchContainer.classList.remove('search--open');
    inputSearch.blur();
    inputSearch.value = '';
}

init();

Now what difference does it make this way:

;(function(window) {

    'use strict';

    var openCtrl = document.getElementById('btn-search'),
        closeCtrl = document.getElementById('btn-search-close'),
        searchContainer = document.querySelector('.search'),
        inputSearch = searchContainer.querySelector('.search__input');

    function init() {
        initEvents();   
    }

    function initEvents() {
        openCtrl.addEventListener('click', openSearch);
        closeCtrl.addEventListener('click', closeSearch);
        document.addEventListener('keyup', function(ev) {
            // escape key.
            if( ev.keyCode == 27 ) {
                closeSearch();
            }
        });
    }

    function openSearch() {
        searchContainer.classList.add('search--open');
        inputSearch.focus();
    }

    function closeSearch() {
        searchContainer.classList.remove('search--open');
        inputSearch.blur();
        inputSearch.value = '';
    }

    init();

})(window);

Answer 1

Usually in Javascript this is done to contain the scope. For example, I write a plugin that has many functions with several names, but I want to expose only a few for use, so I contain the code within parentheses to be placed as a namespace.

function soma () {...}

function subt () {...}

function mult () {...}

function divi () {...}

var calculadora = {
    somar: soma,
    subtrair: subt,
    multiplicar: mult,
    dividir: divi
}

// Funciona
calculadora.multiplicar(2, 3); // 6

// Também funciona
mult(2, 3); // 6

That way the code you care about has functions in the global scope that you can try to rewrite without noticing, since you don’t know the name of the functions that were used because you didn’t write the code. With this we also avoid giving complicated names and full of little ways not to conflict with other function names.

(function (window) {
    function soma () {...}

    function subt () {...}

    function mult () {...}

    function divi () {...}

    window.calculadora = {
        somar: soma,
        subtrair: subt,
        multiplicar: mult,
        dividir: divi
    }
})(window);

// Funciona
calculadora.multiplicar(2, 3); // 6

// Não funciona
mult(2, 3); // Uncaught ReferenceError: mult is not defined

In this way we can define scopes and isolate functions internal internal exposure and we do not need to worry about external conflicts, this also applies to variables within the scope.

Answer 2

In the second way you are creating a Closure: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures

The difference is that in a closure you create a new scope and the variables and functions created within it belong only to it.