Para começarmos, o que e escopo?

Bom, escopo designa um limite dentro quais recursos podem ser utilizados, está e a definição de escopo. Agora em JavaScript, quando falamos de escopo, temos dois tipos de escopo que trabalham de diferente formas, eles são os escopos globais (devemos evitá-lo) e escopo locais, se utilizarmos da forma certa, podemos criar um código muito mais eficiente.

Escopo Global

O escopo global e quando declaramos uma variável no contexto global do código, sem estar no contexto de uma função, ex:

var nome = "Cleitinho Rasta"
console.log(nome) // Cleitinho Rasta

A variável "nome" está sendo contextualizada globalmente, assim ela pode ser modificada/lida de qualquer lugar do código.

Escopo local

Quando declaramos uma variável dentro de um bloco de uma função, chamamos ela de variável local por que ela esta disponível apenas dentro da função, ex:


function digaNome() {
var nome = 'Fabinho do Pneu'
}
console.log(nome) // Lançará um erro


O código acima não será executado, pois a variável "nome" esta disponível apenas dentro da função "digaNome". Quando a função "digaNome" acabar de ser executada a variável diga nome não estará mais disponível.

Exemplo de um codigo real:

Dito isso, sabemos o contexto na qual será executado as variáveis, deixando claro que devemos evitar a declaração de variáveis global, pois declarando desta forma a variável sempre esta disponível/alocada na memoria e então estaremos tendo uma perda de desempenho, isto em um sistema grande pode ser uma grande desvantagem.

Conheça o IIFE e veja o funcionado

O IIFE(Self-Executing Anonymous Function) em português significa "Função anônima auto executante", como o próprio nome já diz, ela e uma função que assim que declarada ela auto executada sem precisar ser chamada como as funções normais.

Para usarmos o IIFE devemos utilizar os parênteses "()", e dentro dela devemos colocar a sintaxe de uma função,

E para ser executada devemos novamente utilizar os parênteses "()".

Tentando acessar a variável musica fora do escopo:

A variável "musica", não e acessada pois não esta no contexto global. Isto é ótimo para evitar que variáveis já declaradas globalmente se conflitam.

Uma boa pratica ao utilizamos IIFE e colocarmos um ponto e virgula antes dos primeiros parênteses, assim:

E uma boa pratica. Sem elas, Assim que o código for executado, poderá haver um conflito, exemplo:

O código lançara um erro.

Conclusão:

Vimos que evitar as variáveis globais e uma boa pratica para que nossa aplicação seja mais eficiente e também não haver conflitos em nosso código através dos escopos locais e também IIFE'S.