자바스크립트에서 전역 카운터 변수

변수 num를 함수 밖으로 꺼내어 전역 변수로 만듭니다:

let num = 1; // 전역 변수

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

이 경우 반환된 모든 함수는 이 전역 변수를 변경하게 되고 카운터들은 서로 의존적으로 동작하게 됩니다:

let num = 1;

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

let func1 = test(); // 첫 번째 카운터
func1();  // 1 출력
func1();  // 2 출력

let func2 = test(); // 두 번째 카운터
func2();  // 3 출력
func2();  // 4 출력

그렇다면 우리의 이전 코드는 왜 독립적인 카운터를 만들었을까요? 코드를 다시 살펴봅시다:

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

문제는 변수 num가 함수 test 내부의 지역 변수라는 점입니다. 따라서 test를 호출할 때마다 자신의 지역 변수를 생성합니다.

그렇기 때문에 반환된 함수들은 각각 test 함수의 자신만의 지역 변수를 참조하게 됩니다. 바로 이렇게 동작의 독립성이 달성됩니다.

만약 num를 전역 변수로 만든다면 - 이것도 클로저입니다. 단지 반환된 함수들의 어휘적 환경이 동일한 변수 num를 참조할 뿐입니다 - 이 변수에 대한 어떠한 변경도 모든 함수에서 보이게 됩니다.

코드를 실행하지 않고 콘솔에 무엇이 출력될지 결정하세요:

let counter = 0;
		
function test() {
	return function() {
		console.log(counter);
		counter++;
	};
}

let func = test;

let func1 = func();
let func2 = func();
func1();
func2();
func1();
func2();

코드를 실행하지 않고 콘솔에 무엇이 출력될지 결정하세요:

function test() {
	let counter = 0;
	
	return function() {
		return function() {
			console.log(counter);
			counter++;
		};
	};
}

let func = test()();

let func1 = func;
let func2 = func;
func1();
func2();
func1();
func2();

코드를 실행하지 않고 콘솔에 무엇이 출력될지 결정하세요:

function test() {
	let counter = 0;
	
	return function() {
		return function() {
			console.log(counter);
			counter++;
		};
	};
}

let func = test();

let func1 = func();
let func2 = func();
func1();
func2();
func1();
func2();