O que são escopo e fechamento em JavaScript?

Quando você está iniciando o JavaScript, você pode ter encontrado escopo e fechamento. Estes são conceitos muito importantes para aprender para um iniciante. Mesmo em entrevistas, o entrevistador pergunta sobre fechamentos.Hoje vamos discutir o que é escopo e quais são os conceitos básicos de escopo em JavaScript. Depois de discutir o escopo, iremos para o fechamento e discutiremos isso. No final deste artigo, você terá conhecimento de escopos e fechamento em JavaScript.

Antes de começar, sugiro que você não pule diretamente para fechar sem entender o escopo. A razão para isso é que, para o conceito de fechamento, entender o conceito de escopo é muito importante.

Escopo

As variáveis ​​às quais você tem acesso é o escopo dessa variável e é dividido em duas partes:

Âmbito global

Se uma variável estiver acessível ao longo do programa, ele tem escopo global. Em outras palavras, podemos dizer que, se uma variável estiver fora de todas as funções e aparelhos encaracolados, é uma variável global e tem um escopo global.

Um exemplo de escopo global em JavaScript é:

const globalName = "John Cena";

Agora que declaramos a variável com o nome GlobalName, podemos obter seu valor em qualquer lugar do código, incluindo funções/métodos.

Por exemplo:

// variável global
const globalName = "John Cena";
// Funciona com o nome de cumprimento
function greet ()
console.log ("Hello", GlobalName);

// chamando a função Greet
saudar();
// Acessando a variável global novamente a função externa
console.log ("Hello Again", GlobalName);

Neste exemplo, primeiro, iniciamos uma variável com o nome de GlobalName. Depois disso, construímos uma função em que cumprimentamos o nome global. Então chamamos a função com esta afirmação saudar(). Depois disso, nós console.registro o GlobalName variável para ver se é acessível fora da função ou não. A saída mostrada no console é:

No entanto, deve -se ter em mente que a maioria dos programadores não recomenda declarar uma variável globalmente porque existe um risco de nomes de variáveis ​​duplicados enquanto faz isso. Nomes de variáveis ​​duplicados ocorrem quando duas variáveis ​​têm o mesmo nome. Na maioria dos casos, isso causará um erro que será difícil de depurar.

Escopo local

Como o nome sugere, uma variável local tem um escopo local. Isso significa que só é acessível em uma função/método ou bloco de código. Fora dessa área, não é acessível e JavaScript gerará um erro. O escopo local em JavaScript é dividido em dois tipos.

Escopo da função

Se uma variável for declarada dentro de uma função, ela só será acessível dentro dessa função e não será acessível fora dela.

Por exemplo:

// Funciona com o nome de cumprimento
function greet ()
// variável local
const LocalName = "Randy Orton";
console.log ("Hello", LocalName);

// chamando a função Greet
saudar();
// acessando a variável local novamente função externa
// Isso irá gerar um erro
console.log ("Hello Again", LocalName);

Neste exemplo, iniciamos um nome local variável e depois console.Log It. Isso nos mostrará a saída de "Randy Orton" no log do console. No entanto, quando consolarmos.registrar a variável local na última linha, ela gerará um erro.

Saída:

Bloquear o escopo

Block Scope nos diz que, se declararmos uma variável entre colchetes, esses colchetes encaracolados serão seu escopo. Que é chamado de escopo de bloco. Não se pode acessar a variável de escopo do bloco fora dos aparelhos encaracolados.

Por exemplo:

const name = "Rey Mysterio";
console.log ("hello", nome);

Neste exemplo, declaramos uma variável com escopo de bloco, pois está dentro da cinta encaracolada. Nós console o login depois.

A saída de “Olá Rey Mysterio” é visto no log do console. No entanto, quando consolarmos o registro fora do aparelho, um erro será gerado.

A função acessa outro escopo de função?

Como já discutimos o escopo da função, vamos lançar alguma luz sobre a questão de saber se duas funções compartilham um escopo ou não. A resposta é não, se declararmos uma variável em uma função e tentarmos acessá -la em outra função, não será acessível.

Por exemplo:

function FirstMessage ()
const message = "Eu sou a primeira função";
console.log ("Acessando da primeira função:", mensagem);

função secondMessage ()
Primeira Mensagem();
console.log ("Acessando da segunda função", mensagem);

SecondMessage ();

Neste exemplo, construímos uma função com o nome de FirstMessage e declaramos uma variável, após a qual console.Log It. Depois disso, construímos uma segunda variável e chamamos a função FirstMessage (). Ele funcionará bem e poderemos ver a mensagem para o console da função FirstMessage (). No entanto, quando tentamos acessar a mensagem variável da função FirstMessage () na função SecondMessage (), veremos um erro.

Este erro é resolvido por fechamentos.

O que é fechamento em JavaScript?

Se você já criou uma função dentro de outra função, basicamente criou um fechamento. A função interna é chamada de fechamento e uma definição mais técnica seria que uma função tendo acesso ao escopo da função pai, mesmo quando a função pai está fechada é chamada de fechamento.

Vamos discutir um exemplo de fechamento:

função parentfunc ()
Seja nameparent = "pai";
console.log (nameparent);
função childfunc ()
console.log ("filho e", nameparent);

retornar infantil;

const store = parentFunc ();
console.log (store);
loja();

Neste exemplo, construímos um ParentFunc e iniciou uma variável nameparente. Depois disso, nós consolamos.registre o nometont e construiu uma segunda função dentro da função pai I-E ChildFunc. Nesta função infantil, console log uma string "Child and" com a variável nameparente. Podemos ver que ParentFunc retorna o ChildFunc. Agora, quando ligarmos para o registro do console ParentFunc, nos mostrará apenas o nameparente. O ChildFunc não foi chamado e não entrou em ação. No entanto, a função externa e interna é armazenada dentro da loja variável. Quando consolarmos registrar a loja, veremos as duas funções. Quando chamamos o loja(), Na verdade, estamos chamando a função interna ou a função anônima que é chidfunc dentro do parentfunc (). Agora, veremos o console da função interna.Log I-e “Criança e Pai”,

O fechamento que criamos nos permite usar o escopo do pai -parente também.

Conclusão

Neste artigo, discutimos os conceitos de escopo e fechamento e no escopo, discutimos os dois principais tipos de escopo que são: escopo global e escopo local. Mais adiante no escopo local, discutimos o escopo funcional e os escopos de bloqueio junto com exemplos. Depois disso, tropeçamos em um problema que tem acesso a outro escopo de função. Resolvamos isso usando o fechamento discutindo junto com exemplos.