Come funziona lo scope in JavaScript

In questo video parleremo dello "scope", un concetto molto importante da capire, non solo per JavaScript ma per qualsiasi linguaggio di programmazione.
Lo scope è "l'ambiente" in cui una variabile o una funzione è valida. Uno script JavaScript può avere diversi ambienti uno interno all'altro, capire cosa definisce un ambiente e come funziona lo scope permette di sapere dove è possibile usare una determinata variabile o funzione.
In questo video vedremo anche, dal punto di vista dello scope, che differenza c'è nell'usare la vecchia keyword per variabili "var" e le nuove keyword introdotte con l'ECMAScript 6: let e const.

Trascrizione: (click per espandere)
salve a tutti in questo video parlerò
dello scope di una variabile come
abbiamo visto nel video precedenti ci
sono tre keyword per dichiarare una
variabile c'è la keyword var keyword let
e la keyword const dal punto di vista
dello scope let e cost si comportano
alla stessa maniera quindi la differenza
è tra ver e let/const cosa è lo
scopo lo scope
lo scope è l'ambiente in cui vive la
variabile l'ambiente in cui questa
variabile può essere usata ad esempio in
questo file e qui ho un ambiente globale
che va dal dall'inizio del tag script
alla chiusura del tag script tutto
questo ambiente qui è un ambiente che
per comodità chiamo globale e quindi se
io dichiaro una variabile qui ad esempio
var
x e le assegna un valore di 10 per
esempio l e poi dichiara un'altra
variabile let y e le assegno un
valore di 50 posso andare a vedere il
loro output tranquillamente sempre nello
stesso ambiente
ecco qui io posso vedere che dichiara le
variabili in questo ambiente e posso
andare a manipolarle posso andare a
visualizzare i loro output sempre di
questo ambiente non c'è nessun problema
perché questo è un ambiente globale
cosa succede nel momento in cui io
aggiungo un ambiente all'ambiente
globale cioè creo un ambiente interno
dentro l'ambiente globale
per fare questo io posso dichiarare una
funzione quando io dichiaro una funzione
sto creando un altro ambiente
per esempio funzione 1 ecco qui se io
vado a dichiarare queste a vedere queste
variabili dentro la funzione adesso non
vi serve sapere bene come funziona la
funzione appunto vi serve solo avere
un'idea di quello che sto cercando di
fare come vedete io ne ho dichiarato una
funzione qui quindi ho creato un
ambiente interno all'ambiente globale e
sono andato a interagire a visualizzare
o cercare di manipolare delle variabili
dichiarate nell'ambiente esterno e e ce
le ho le commento così ho solo quelle
eccole qui quindi io posso manipolare
negli ambienti interni variabili
dichiarate nell'ambiente esterni non
posso fare il contrario quindi se io qui
vado a dichiarare una variabile per
esempio il let z e le assegno il valore
di 50 finché io sono dentro l'ambiente
interno posso vedere il valore di z
eccolo qui nel momento in cui provo a
visualizzare il valore di z
nell'ambiente globale quindi
nell'ambiente esterno
io ho un errore perché nell'ambiente
esterno
la variabile z non esiste in questo
ambiente
la variabile z esiste solo nell'ambiente
interno andiamo a vedere un esempio
grafico immaginate che l'ambiente
globale sia questo cerchio rosso tutte
le variabili
dichiarate dentro al cerchio rosso
possono essere usate nei suoi ambienti
interni come una funzione per esempio e
se io ho una funzione dentro un'altra
funzione come in questo caso le
variabili dichiarate nell'ambiente
globale possono usare anche qui e anche
le variabili dichiarate nell'ambiente
esterno possono essere usate qui lei il
contrario non può non avviene le
variabili dichiarate nell'ambiente
interno non possono essere dichiarate
nell'ambiente esterno quindi variabile
dichiarate nel sub interno non possono
essere usate qui è neanche qui le
variabili dichiarate nell'ambiente
interno quindi nel giallo possono essere
usate qui perché è al suo interno ma non
possono essere usate nell'ambiente
globale del rosso
andiamo a vedere la differenza tra le
usare la keyword var e la
keyword let
ricordo che usare let e const dal
punto di vista dello scope non cambia
niente allora si dice che var ha un
functional scope cioe' l'ambiente interno
è creato dalle funzioni
quindi io se posso creare ambienti
interni solo quando uso una funzione
mentre let e const si dice che ha un
block scope
a me basta un blocco di codice per
creare un ambiente interno non ho
bisogno di avere una funzione facciamo
subito subito un esempio invece di
andare a creare una variabile come una
funzione con l'ho fatto qui vado a
creare un semplice blocco di codice per
esempio con un "if else" il blocco di codice
se vi ricordate gli ho detto che è
rappresentato dalle parentesi graffe qui
vado a dichiarare due variabili una con
var per esempio xx e gli assegno un 10
poi vado a dichiarare una variabile con
let y y e gli assegni cento
come vedete se io provo a stampare il
loro output qui non ho nessun problema
per un attimo commentare questo
eccolo qui io ho stampato xx e y y
nessun problema
cosa succede se io provo a stampare y y
fuori dal blocco di codice
io ho un errore quindi ricapitolando per
creare le ambienti interni quando io sto
usando la keyword var devo creare devo
creare funzioni per creare ambienti
interni quando io sto usando la keyword
let posso usare funzioni o
qualsiasi altro tipo di blocco di codice
l'importante il blocco di codice vi ricordo
che è rappresentato dalle parentesi
graffe questo è stato introdotto con
la ECMAScript 6 perche' bene o male
tutti gli altri linguaggi di
programmazione a usano variabili block
scope e javascript usava
variabili functions scope per uniformare
un po tutti i linguaggi javascript con
gli altri linguaggi e stata introdotta
questa nuova keyword let
e noi da questo momento del video corso
useremo sempre let
con questo ho detto tutto sentiamo la
prossima ciao
File del video: