deividy@blog:~

JavaScript Hoisting

04/02/2018

Basicamente, toda definição em JavaScript é 'hoisted' no topo de seu escopo. O que eu quer basiscamente dizer ...

JavaScript Hoisting


Basicamente, toda definição em JavaScript é 'hoisted' no topo de seu escopo. O que eu quer basicamente dizer que quando usamos um var foo = 'bar' o compilador JavaScript vai mover o var foo; no topo da função e a definição do foo = 'bar' ira ficar onde foi definida.


Considere o seguinte código:

fnExpression(); // => throw TypError! var fnExpression = function() { return "I'm a expression assigned to a variable"; } fnExpression(); // => "I'm a expression assigned to a variable" fnStatement(); // => "I'm a statement with name" fuction fnStatement() { return "I'm a statement with name"; } fnStatement(); // => "I'm a statement with name" var scope = 'global'; function fn() { return scope; var scope = 'local'; } fn(); // => undefined

Notou algo bem loco por aí?

Importante ressaltarmos também que uma expressão é diferente de um statement, basicamente, no exemplo acima, uma expressão é uma declaração com var fnExpression = function () {...}, enquanto um statement é fuction fnStatement() { ... }). Expressōes são 'hoisted' no topo de seu escopo, mas não a sua inicialização, logo no exemplo de var fnExpression = function () {...}, a var fnExpression vai para o topo do escopo mas não a sua inicialização, daí quando tentamos usar a função tomamos um TypeError, por outro lado, statements são hoisted por inteiro e por isso o uso da fnStatement() funciona antes de sua definição.


Para ter uma visualização melhor, é assim que esse código fica do ponto de vista do compilador:

var fnExpression, scope; function fnStatement() { return "I'm a statement with name"; } function fn() { var scope; return scope; scope = 'local'; } fnExpression(); fnExpression = function() { return "I'm a expression assigned to a variable"; } fnExpression(); fnStatement(); fnStatement(); scope = 'global'; fn();


Eaí, curtiu? Tem dúvidas? Posta-ae! :)