Code within parentheses [duplicate]

Question

Code within parentheses [duplicate]

Navigation

#1 by (5 votes)
#2 by (1 votes)

1

What's different about writing a 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's the difference to do this:

;(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);

javascript

asked by anonymous 06.03.2017 / 20:57

2 answers

1

In the second form you are creating a Closure: link

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

06.03.2017 / 21:04

Bug in print Problem with Split () on Mono

score 5 · Accepted Answer

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 just a few to use, so I contain the code inside 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

In this way the code you import has functions in the global scope that you can try to rewrite without realizing it, since you do not know the name of the functions that were used because you did not write the code. With this we also avoid giving complicated and complex names so as 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 internal functions from internal exposure and we do not have to worry about external conflicts, this also applies to variables within the scope.