Funktionien leksikaalisen ympäristön soveltaminen JavaScriptissä

Oletetaan, että meillä on funktio, joka palauttaa tuloksenaan toisen funktion:

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

Jos vanhempifunktiolla on muuttujia, niin nämä muuttujat sisältyvät palautetun funktion leksikaaliseen ympäristöön:

function test() {
	let num = 1; // vanhempifunktion muuttuja
	
	return function() {
		// leksikaalinen ympäristö = {num: 1}
	}
}

Kirjoitetaan palautettavan funktion koodiin console.log, joka tulostaa muuttujan num arvon:

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

Kutsutaan nyt vanhempifunktiota test ja tallennetaan sen tuloksena saatu arvo muuttujaan func:

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

let func = test();

Muuttujaan func tallentuu palautettu funktio. Kutsutaan funktiota - sen tuloksena se tulostaa muuttujan num sisällön:

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

let func = test();
func(); // tulostaa 1

Jos yrittää yksinkertaisesti tulostaa muuttujan num funktion ulkopuolella - se ei ole saatavilla:

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

console.log(num); // muuttuja num ei ole saatavilla täällä

Kuten näette, paikallinen muuttuja num sitoutui funktiomme leksikaaliseen ympäristöön ja nyt, kutsumalla tätä funktiota missä tahansa koodin kohdassa, voimme saada muuttujan num arvon, vaikka itse muuttuja ei olisikaan saatavilla kutsukohdassa.

Itse asiassa samaan tulokseen voidaan päästä tekemällä muuttuja num globaaliksi:

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

let num = 1; // globaali muuttuja
let func = test();
func(); // tulostaa 1

Tässä on kuitenkin merkittävä ero: uudessa versiossa muuttujaa num voidaan muuttaa funktioiden ulkopuolella (koska se on globaali), kun taas vanhassa - ei.

Päätä, käyttämättä koodia, mitä tulostetaan konsoliin:

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

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

Päätä, käyttämättä koodia, mitä tulostetaan konsoliin:

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

console.log(test()());

Päätä, käyttämättä koodia, mitä tulostetaan konsoliin:

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

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

Päätä, käyttämättä koodia, mitä tulostetaan konsoliin:

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

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