Applicazione dell'ambiente lessicale delle funzioni in JavaScript

Supponiamo di avere una funzione che restituisce un'altra funzione come risultato:

function test() {
	return function() {
		
	}
}

Se la funzione genitore ha delle variabili, queste variabili saranno contenute nell'ambiente lessicale della funzione restituita:

function test() {
	let num = 1; // variabile della funzione genitore
	
	return function() {
		// ambiente lessicale = {num: 1}
	}
}

Scriviamo nel codice della nostra funzione restituita console.log, che visualizza il valore della variabile num:

function test() {
	let num = 1;
	
	return function() {
		console.log(num);
	}
}

Ora chiamiamo la funzione genitore test e registriamo il risultato della sua esecuzione in una variabile func:

function test() {
	let num = 1;
	
	return function() {
		console.log(num);
	}
}

let func = test();

Nella variabile func verrà registrata la funzione restituita. Chiamiamo la nostra funzione - come suo risultato visualizzerà il contenuto della variabile num:

function test() {
	let num = 1;
	
	return function() {
		console.log(num);
	}
}

let func = test();
func(); // visualizzerà 1

Se invece si tenta semplicemente di visualizzare la variabile num al di fuori della funzione - non sarà accessibile:

function test() {
	let num = 1;
	
	return function() {
		console.log(num);
	}
}

console.log(num); // la variabile num qui non è accessibile

Come puoi vedere, la variabile locale num si è legata all'ambiente lessicale della nostra funzione e ora, chiamando questa funzione in qualsiasi punto del codice, potremo ottenere il valore della variabile num, anche se nel punto di chiamata la variabile di per sé non è accessibile.

In realtà, si potrebbe ottenere un risultato simile rendendo la variabile num globale:

function test() {
	return function() {
		console.log(num);
	}
}

let num = 1; // variabile globale
let func = test();
func(); // visualizzerà 1

Tuttavia, qui ci sarà una differenza sostanziale: nel nuovo caso la variabile num può essere modificata al di fuori delle funzioni (poiché è globale), mentre nel vecchio caso - no.

Determina, senza eseguire il codice, cosa verrà visualizzato nella console:

function test() {
	let num1 = 1;
	let num2 = 2;
	
	return function() {
		return num1 + num2;
	}
}

let func = test();
console.log(func());

Determina, senza eseguire il codice, cosa verrà visualizzato nella console:

function test() {
	let num1 = 1;
	let num2 = 2;
	
	return function() {
		return num1 + num2;
	}
}

console.log(test()());

Determina, senza eseguire il codice, cosa verrà visualizzato nella console:

function test() {
	let num1 = 1;
	
	return function() {
		return num1 + num2;
	}
}

let num2 = 2;
let func = test();
console.log(func());

Determina, senza eseguire il codice, cosa verrà visualizzato nella console:

function test() {
	let num = 1;
	
	return function() {
		return num;
	}
}

let num = 2;
let func = test();
console.log(func());