Cosa sono l'ambito e la chiusura in JavaScript?

Quando inizi per la prima volta JavaScript potresti aver incontrato l'ambito e le chiusure. Questi sono concetti molto importanti da imparare per un principiante. Anche nelle interviste, l'intervistatore chiede delle chiusure.Oggi discuteremo di cosa sia l'ambito e quali sono i concetti di base di portata in JavaScript. Dopo aver discusso dell'ambito, andremo verso la chiusura e ne discuteremo. Entro la fine di questo articolo, avrai conoscenza degli ambiti e della chiusura in JavaScript.

Prima di iniziare suggerirei di non saltare direttamente alla chiusura senza capire l'ambito. La ragione di ciò è che per il concetto di chiusura, la comprensione del concetto di portata è molto importante.

Scopo

Le variabili a cui hai accesso è l'ambito di quella variabile ed è divisa in due parti:

Portata globale

Se una variabile è accessibile durante il programma, ha un ambito globale. In altre parole, possiamo dire che se una variabile è al di fuori di tutte le funzioni e le parentesi graffe, è una variabile globale e ha un ambito globale.

Un esempio di portata globale in JavaScript è:

const globalName = "John Cena";

Ora che abbiamo dichiarato la variabile con il nome GlobalName, possiamo ottenere il suo valore ovunque nel codice, inclusi funzioni/metodi.

Per esempio:

// variabile globale
const globalName = "John Cena";
// funzione con il nome di saluto
funzione saluto ()
console.log ("ciao", globalname);

// chiamando la funzione saluto
salutare();
// Accesso alla variabile globale di nuovo Funzione esterna
console.log ("ciao di nuovo", globalname);

In questo esempio, in primo luogo, abbiamo avviato una variabile con il nome di GlobalName. Dopodiché, abbiamo costruito una funzione in cui abbiamo salutato il nome globale. Quindi abbiamo chiamato la funzione con questa affermazione salutare(). Dopo questo, noi console.tronco d'albero IL GlobalName variabile per vedere se è accessibile al di fuori della funzione o meno. L'uscita mostrata nella console è:

Tuttavia, si dovrebbe tenere presente che la maggior parte dei programmatori non raccomanda di dichiarare una variabile a livello globale perché esiste un rischio di nomi variabili duplicati mentre lo fanno. I nomi delle variabili duplicati si verificano quando due variabili hanno lo stesso nome. Nella maggior parte dei casi, ciò causerà un errore che sarà difficile da debug.

Portata locale

Come suggerisce il nome, una variabile locale ha un ambito locale. Ciò significa che è accessibile solo all'interno di una funzione/metodo o blocco di codice. Al di fuori di quella zona, non è accessibile e JavaScript genererà un errore. L'ambito locale in JavaScript è diviso in due tipi.

Ambito da funzione

Se una variabile viene dichiarata all'interno di una funzione, sarà accessibile solo all'interno di quella funzione e non sarà accessibile al di fuori di essa.

Per esempio:

// funzione con il nome di saluto
funzione saluto ()
// variabile locale
const localName = "Randy Orton";
console.log ("Hello", localname);

// chiamando la funzione saluto
salutare();
// Accesso alla variabile locale di nuovo Funzione esterna
// questo genererà un errore
console.log ("ciao di nuovo", local local);

In questo esempio, abbiamo avviato un nome locale variabile e quindi console.Accedilo. Questo ci mostrerà l'output di "Randy Orton" nel registro della console. Tuttavia, quando console.Registra la variabile locale nell'ultima riga, genererà un errore.

Produzione:

Scope di blocchi

L'ambito a blocchi ci dice che se dichiariamo una variabile tra parentesi ricci, quelle staffe ricci saranno il suo ambito. Questo si chiama ambito a blocchi. Non è possibile accedere alla variabile dell'ambito di blocco al di fuori delle parentesi cure.

Per esempio:

const name = "rey mysterio";
console.log ("ciao", nome);

In questo esempio abbiamo dichiarato una variabile con portata di blocco come è all'interno del tutore riccio. Console lo registri in seguito.

L'output di "Ciao Rey Mysterio" è visto nel registro della console. Tuttavia, quando la console lo registrerà al di fuori delle parentesi, verrà generato un errore.

La funzione accede a un'altra funzione di funzione?

Come abbiamo già discusso dell'ambito della funzione, facciamo luce sulla questione se due funzioni condividano un ambito o meno. La risposta è no, se dichiariamo una variabile in una funzione e proviamo ad accedervi in ​​un'altra funzione, non sarà accessibile.

Per esempio:

funzione firstMessage ()
const message = "I Am First Function";
console.log ("Accesso dalla prima funzione:", messaggio);

funzione secondMessage ()
FirstMessage ();
console.log ("Accesso dalla seconda funzione", messaggio);

SecondMessage ();

In questo esempio, abbiamo costruito una funzione con il nome di FirstMessage e abbiamo dichiarato una variabile, dopo di che console.Accedilo. Successivamente, abbiamo costruito una seconda variabile e chiamato la funzione FirstMessage (). Funzionerà bene e saremo in grado di vedere il messaggio per la console dalla funzione FirstMessage (). Tuttavia, quando proviamo ad accedere al messaggio variabile dalla funzione FirstMessage () nella funzione SecondMessage () vedremo un errore.

Questo errore è risolto dalle chiusure.

Cos'è la chiusura in Javascript?

Se hai mai creato una funzione all'interno di un'altra funzione, hai sostanzialmente creato una chiusura. La funzione interna è chiamata chiusura e una definizione più tecnica sarebbe che una funzione che ha accesso all'ambito della funzione principale anche quando la funzione genitore ha chiuso è chiamata chiusura.

Discutiamo un esempio di chiusura:

funzione parentFunc ()
let namepart = "genitore";
console.log (namepart);
funzione ChildFunc ()
console.log ("Child and", namepart);

restituire Childfunc;

const store = parentFunc ();
console.registro (negozio);
negozio();

In questo esempio, abbiamo costruito a parentefunc e ha avviato una variabile namepart. Dopodiché, console.registrare il namepart e costruire una seconda funzione all'interno della funzione genitore I-e Childfunc. In questa funzione figlio, console registriamo una stringa "figlio e" con la variabile namepart. Possiamo vedere che ParentFunc restituisce il Childfunc. Ora, quando chiamiamo il registro della console ParentFunc, ci mostrerà solo il namepart. IL Childfunc non era chiamato e non è entrato in azione. Tuttavia, la funzione esterna e interna è memorizzata all'interno del negozio variabile. Quando console registrare il negozio, vedremo entrambe le funzioni. Quando chiamiamo il negozio(), In realtà stiamo chiamando la funzione interna o la funzione anonima che è chidfunc all'interno del genitore (). Ora vedremo la console della funzione interiore.log i-e "figlio e genitore",

La chiusura che abbiamo creato ci consente anche di utilizzare l'ambito del parentefunc.

Conclusione

In questo articolo, abbiamo discusso dei concetti di portata e chiusura e nella portata, abbiamo discusso dei due principali tipi di portata che sono: portata globale e portata locale. Più in grado di ambito locale, abbiamo discusso dell'ambito funzionale e dei bloccanti insieme agli esempi. Dopodiché, ci siamo imbattuti in un problema che ha accesso a un'altra funzione di funzione. Lo abbiamo risolto usando la discussione della chiusura insieme agli esempi.