4 minutos de leitura
881

Irei abordar um pouco sobre as funcionalidades do javascript, basicamente falar um pouco sobre como o Javascript cria e instancia uma variável seguindo alguns métodos.

Vamos lá!

## Hoisting

Hoist em inglês significa levantar ou suspender algo através de um aparato mecânico. Em bom português, significa usar o guindaste para elevar um objeto.

É basicamente isso que acontece, toda vez que você declara uma variável ela se “eleva” para o topo do escopo. Entendeu? Não?! Pense o seguinte, toda vez que voce declara uma variável ela não é inicializada e recebe um valor undefined.

Vamos pro codigo que fica mais fácil.

Exemplo:

// EXEMPLO 1

function showName () {
    console.log (name);

    var name = "José beije meu pé";
    console.log (name);
}

showName ();
// Result: Undefined
// Result: José beije meu pé

NOTA: A razão para a primeira impressão ser undefined é que a variável local name foi hasteada ao topo da função. Deixa eu explicar com codigo o que realmente aconteceu.

// EXPLICANDO O EXEMPLO 1

function showName () {
    var name; // name é hasteada e vem para o topo do escopo: Underfined
    console.log (name); // Result name: Underfined

    var name = "José beije meu pé"; // Atribui valor a name.
    console.log (name); // Result name: José beije meu pé
 }

Simples, né? “Por que você não falou antes cara? Agora sim, entendi a bagaça” Vamos ver agora um exemplo trabalhando com funções.

// EXEMPLO 2

console.log(showName ("Jose", "beije meu pé"));

showName = function(name, lastname) {
    return name+' '+lastname;
}
// Result: showName is not defined

Primeiramente ele diz que showName não foi declarado. Vamos mudar novamente para:

// EXEMPLO 2.1

console.log(showName ("Jose", "beije meu pé"));

function showName (name, lastname) {
    return name+' '+lastname;
}
// Result: Jose beije meu pé

Conseguiu entender como é simples evitar e perder tempo com esse pequeno problema? Show! Vamos para o proximo.

## Closure

Você ja deve ter ouvido falar bastante, em algum momento ja usou, mas se não usou com certeza vai usar. > “Um closure é uma função interior que tem acesso a variáveis de uma função exterior.” Trocando em miúdos: Uma função filho acessando uma variavel da função pai. Para fazer isso funcionar, basta criar uma função dentro de outra função. Dessa forma para ter acesso a variável pai não é necessário passar valores por parâmetro.

Vamos ver um Exemplo:

// EXEMPLO 3

function showNamePai (name, lastname) {
    var namepai = "José beije meu pé, ";

    // Esta função showNameFilho tem acesso as variáveis da função exterior: showNamePai
    function showNameFilho () {
        return namepai + name + " " + lastname;
    }
    return showNameFilho ();
}

console.log(showNamePai ("João", "beije minha mão."));
// Result: José beije meu pé, João beije minha mão.

Pense o seguinte: A variável namepai apesar de ser um “escopo” pertence a função showNamePai e não a função showNameFilho. Mas a showNameFilho esta acessando ela tranquilamente. Bem tranquilo esse né? Os Closures torna os códigos mais compactos e fáceis de ler, além de reaproveitáveis. Saber como utilizá-los elimina muito tempo e retrabalho.

## Variável Global A linguagem JavaScript tem dois escopos: global e local. Uma variável declarada fora de uma definição de função é uma variável global, e seu valor será acessível e modificável em todo o seu programa. Já uma variável declarada dentro de uma definição de função é local. Ela é criada e destruída sempre que a função é executada e não pode ser acessada por qualquer código fora da função.

Vamos ver um Exemplo:

// EXEMPLO 4

var namepai = "José beije meu pé, João beije minha mão."; // Variável Global

function showNamePai () {
    var namepai = "Nicolau, por que foges?"; // Variável Local
    return namepai;
}
console.log(namepai); // Result: José beije meu pé, João beije minha mão.

console.log(showNamePai ()); // Nicolau, por que foges?

Apesar de ambas estarem declaradas com o mesmo nome, uma é local a outra é global, ambas recebem valores diferentes.

## Variável por parâmetro

Na passagem de parâmetros para uma função é criado uma cópia dos valores e/ou referências no caso de objetos. Essa variável será tratada como local, mesmo que a mesma seja uma variável global.

Exemplo:

// EXEMPLO 5

function showCode () {
    var num = 10;
    function showPar (resultPar) {
        resultPar += 1;
        console.log(resultPar);
    }
    showPar(num); // Result: 11

    console.log(num); // Result: 10
}
showCode();

Vamos ver a mesma função passando como variável global

// EXEMPLO 5.1

var num = 10; // Variável Global

function showPar (resultPar) {
    resultPar += 1;
    console.log(resultPar);
}
showPar(num); // Result: 11 - Ele entra na função por parametro
console.log(num); // Result: 10 - Ele pega apenas a variavel global

## Instanciação usando uma IIFE

O IIFE significa “Immediately-invoked function expression”, ou podemos chamar de função imediata. Ela executa a função imediatamente depois de criada. Ela é bem útil para manter a limpeza do código também.

Exemplo:

// EXEMPLO 6

(function imediata(num) {
    console.log(num);
})(5);

O exemplo acima chamamos de função imediata com parâmetro. Elas podem ser anônimas também, veja no exemplo abaixo.

Exemplo:

// EXEMPLO 6.1

(function(num) {
    console.log(num);
})(5);

Bom galera, então é isso, neste pequeno post falei um pouco do básico sobre criação e instanciação de variável no javascript, espero poder falar um pouco mais em breve.

Erros, dúvidas e sugestões podem comentar abaixo.

The End Manolo

comments powered by Disqus
Image

Geriel Castro

Desenvolvedor Front End - UX, morando no Rio de Janeiro Programador WEB Consultor SEO e Mídias Sociais