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

Continuando o post de para quem ainda não leu o primeiro post veja aqui, para quem já leu, vamos continuar.

Explicitamente aplicada
Uma função pode ser aplicada explicitamente a qualquer objeto, e para isso utilizamos os métodos call ou apply veja este post.

Os métodos call e apply nos permitem controlar o valor de this e assim definir para qual objeto ele fará referência. A diferença entre eles é a forma que recebem os parâmetros e também a velocidade de execução que pode variar de navegador para navegador.

Na função createPhrase faço referência ao objeto ‘myObjetct’, com isto consigo acessar os nós dele, this.phraseC que tem como valor Entendendo como funciona e this.phraseD que tem como valor Quando uma função é aplicada explicitamente.

Como um construtor
Quando uma função é usada como um construtor (usando a palavra chave new), this fará referência ao novo objeto que está sendo construído.

O que é Hoisting ?

Hoisting: Levante (algo) por meio de cordas e polias. Sinônimos: levantar, levantar-se, elevador, transportar-se, erguer-se, subir, suba, Guincho para cima, puxar para cima, elevar.

Elevação (hoisting): Em tempo de execução, todas as variáveis e declarações de funções são movidas para o início de cada função (seu próprio escopo), independentemente de onde eles são declarados — isso é conhecido como elevação (hoisting). Dito isso, é uma boa prática declarar todas as variáveis juntas na primeira linha, a fim de evitar falsas expectativas em relação a uma variável que foi declarada depois mas que acabou recebendo um valor antes.

No entanto, somente a declaração será hoisted (elevado). Se a variável é também inicializada o valor no topo do escopo será inicialmente configurado para undefined.

JavaScript Hoisting

Vamos vê-lo em ação:

Que é interpretado e executado:

E porque eu devo me importar ?

O código acima esta tudo ok até o momento vamos fazer algumas modificações.

O primeiro console ira te retornar The value of variable: undefined e o segundo The new value of varible: I love Javascript !!!, para muitos o valor undefined é bem estranho, principalmente para desenvolvedores C (e tua família) e novos com Javascript, vamos entender o porque disto:

Eu sei que isto é bem estranho, mas por padrão devemos adotar que toda declaração de variáveis fiquem no início do seu código, evitando assim bugs.

Function Hoisting

As funções também são elevadas (hoisted).

O interpretador de JavaScript permite que você use uma função antes de ser declarado no código-fonte.

No entanto, a função de elevação ocorre apenas para funções declaradas, e não funções anonimas.

No exemplo de código acima vemos a interação de dois tipos diferentes dehoisting. Nossa variável fnNotHoisting tem a sua declaração hoisting, mas não o seu valor, que é undefined. Funções anonimas não hoisting.

E o que mudou no ES2015?

Bem com a chegada do ES2015 uma das boas mudanças foi a chegada devariáveis com let e escopo. Esta novidade agora permite declarar variáveis limitadas ao âmbito de um bloco o oposto do var, por declarar e sobrescrever variáveis no âmbito global de sua função envolvente.

O let irá fazer hoisting da variável no topo do bloco, ou seja, caso seja declarado novamente no mesmo contexto, a segunda declaração retornará um TypeError. E caso a variável definida com let seja referenciada antes da sua declaração, o erro será de referência.

Vamos ver um exemplo com let:

No código acima temos as funções helpMe() e imHere(), na função helpMe a variável location pode ser acessada fora do bloco if, por isto quando chamamos a variável phrase é retornando o resultado: 
Me ajude, localização -> -23.5193987,-46.1895406

Diferentemente na função imHere a variável here nós retorna: 
ReferenceError: here is not defined.
 
Pois ela esta definida dentro do bloco if, podendo ser acessada somente neste bloco.

Diferença entre var e let

Com var é possível re-declarar a mesma variável, o mesmo não acontece com let, vamos ver um exemplo:

Com var podemos ler a variável mesmo que ela que o código anda não tenho sido inicializado, com var isto vai retornar undefined, com let isto vai te retornar um erro, veja a seguir:

Algo novo que surgiu é a Const, em ES6, uma const representa uma referência constante para um valor. Em outras palavras, o valor não está congelado, apenas a atribuição dele.

Algumas coisas a se lembrar:

  • let e const são escopadas aos fechamentos de bloco mais próximos.
  • Quando usar const, use CAPITAL_CASING;
  • hoisting” de let e const variam da forma tradicional de “hoisting” de variáveis e funções. Ambos estão “hoistados”, mas não podem ser acessados antes das suas declarações.
  • const deve ser definida na sua declaração

Ficou alguma dúvida? Entrem em contato.

Show your support

Clapping shows how much you appreciated Luiz Celso de Faria Alves’s story.