14: O que é escopo em Javascript?

February 14, 2020

https://www.instagram.com/tv/B9w3lg6nzt4/

Escopo em JavaScript é a área em que temos acesso válido a variáveis ou funções.

JavaScript tem três tipos de escopos: Escopo Global , Escopo da Função e Escopo do Bloco (ES6).

Escopo Global - variáveis ou funções declaradas no espaço de nomes global estão no escopo global e, portanto, estão acessíveis em qualquer lugar em nosso código.

//global namespace
var g = "global"

function globalFunc(){
    function innerFunc(){
        console.log(g) // G é global, então é acessível aqui
    }
    innerFunc()
}

Escopo da Função - variáveis, funções e parâmetros declarados em uma função são acessíveis dentro dessa função, mas não fora dela.

function myFavoriteFunc(a) {
    if (true) {
        var b = "Hello " + a
    }
    return b
}
myFavoriteFunc("World")

console.log(a) // Throws a ReferenceError "a" is not defined
console.log(b) // does not continue here

Escopo do bloco - variáveis ( let, const) declaradas em um bloco {}só podem ter acesso dentro dele.

 function testBlock(){
   if(true) {
     let z = 5
   }
   console.log(z)
 }

 testBlock() // Throws a ReferenceError "z" is not defined

Escopo também é um conjunto de regras para encontrar variáveis. Se uma variável não existe no escopo atual ele sai olhando nos escopos acima no escopo externo, e se não existe mais uma vez, olha para cima novamente até atingir o escopo global se a variável existe ele usa, senão manda aquele errão brabo na tela e para de procurar. Isso é chamado de cadeia de escopo.

   /* Scope Chain
   Inside inner function perspective

   inner's scope -> outer's scope -> global's scope
  */

  //Global Scope
  var variable1 = "Comrades"
  var variable2 = "Sayonara"

  function outer(){
  //outer's scope
    var variable1 = "World"
    function inner(){
    //inner's scope
      var variable2 = "Hello"
      console.log(variable2 + " " + variable1)
    }
    inner()
  }
  outer()
// logs Hello World
// because (variable2 = "Hello") and (variable1 = "World") are the nearest
// variables inside inner's scope.

Baseado no excelente artigo: 70 Interview Questions