em
js-logo

Entendendo hoisting e escopo, e o que mudou no ES2015 — Parte 1

post

Alguns programadores que iniciam com javascript acabam passando sempre por problemas de como entender Hoisting e Escopo, afinal WTF Man ???

Vejamos o código abaixo:

No código acima declaramos name como uma variável global com o valor “Marquinho”, temos a chamada da função family() e neighborhood(), a diferença é que a função family tem como escopo IIFE, e funciona mesmo sendo definida depois, já neighborhood não é hoisted apenas sua declaração. Em JavaScript todas declarações de funções e variáveis são movidas para o topo de cada escopo e isto chamamos de hoisting. Em tempo de execução ao declarar sua variável e função, a mesma é sempre elevada ao topo. Porém somente sua declaração é hoisted e não sua inicialização, e funções anonimas ou expressão de função é hoisted acontece a mesma coisa, por isto a função neighbordhood ao ser invocada na linha 4, nos retorna undefined. Vamos entender como nosso código é interpretado:

Declaração e inicialização? É muito importante entender a diferença entre declarar e inicializar uma variável em JavaScript:

Declaração

Inicialização

No ES5 temos dois escopos para as variáveis: escopo de função e global.

O que é Escopo? Escopos: Em ES5, funções são nosso delimitador de escopo de fato para declaração de variáveis, o que significa que blocos usuais de loops e estruturas condicionais (como if, for, while, switch e try) NÃO delimitam escopos, diferente de muitas outras linguagens como C, C++, Java e ES2015. Portanto, esses blocos irão compartilhar do mesmo escopo que a função que os contém. Dessa forma, pode ser perigoso declarar variáveis dentro de blocos, já que irá parecer que a variável pertence apenas ao bloco, esse é um problema comum para programadores vindos de linguagens com escopos em blocos.

Como entrar em um escopo

Temos 4 maneiras:

  • Definido pela linguagem: todo escopo possui o this, e caso seja uma função, também o arguments.
  • Declaração de uma variável: variáveis declaradas como var name.
  • Declaração de uma função: funções declaradas na forma function family() {}.
  • Parâmetros de uma função: caso uma função seja chamada na forma brother(name), podendo ser brother(name, mother, …), sendo name e mother entram no escopo da função.

Como poderia ficar nosso código:

No código acima ainda podemos acessar a varivel newVal fora do bloco do loop, como podemos criar um escopo dentro do loop em ES5, utilizando ‘IIFE’ (recomento a leitura destes post link, feito por meu amigo Pedro Araujo), era nossa única maneira de se criar um escopo dentro de um bloco, com a vinda do ES2015 isto mudou, mas vamos ver isto mais para frente. Vamos ver se ficou claro

O que é this?

Aqui esta uma das partes mais confusas do JavaScript, como o this funciona? o que come? onde vive? Brincadeiras a parte this é uma referência ao contexto no qual a função esta sendo executada, ao objeto no qual ela pertence. Em grande parte de outras linguagens o this é uma referencia ao objeto atual instanciado, contudo para dar um nó na sua mente em JavaScript o this vai depender de como sua função foi inicializada.

Algumas formas de chamar uma função:

  • Diretamente
  • Como um método
  • Explicitamente aplicada
  • Como construtor

Diretamente

Quando uma função é chamada diretamente, this fará referencia ao contexto global, que no caso dos navegadores é o objeto window.

Como um método São funções que são armazenadas dentro das propriedades de um objeto, se uma função for chamada como um método de um objeto, então this, dentro dessa função, fará referência a esse objeto.

Por hoje é isto pessoal, críticas, sugestões são sempre bem vindas =D, em breve temos a parte 2.

Link do post no meu medium

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>