자바스크립트에서 함수의 렉시컬 환경 활용

다른 함수를 결과로 반환하는 함수가 있다고 가정해 봅시다:

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

부모 함수에 어떤 변수가 있다면, 그 변수들은 반환된 함수의 렉시컬 환경에 포함될 것입니다:

function test() {
	let num = 1; // 부모 함수의 변수
	
	return function() {
		// 렉시컬 환경 = {num: 1}
	}
}

반환된 함수 코드에 변수 num의 값을 출력하는 console.log를 작성해 봅시다:

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

이제 부모 함수 test를 호출하고 그 결과를 변수 func에 기록해 봅시다:

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

let func = test();

반환된 함수가 변수 func에 기록됩니다. 함수를 호출해 봅시다 - 그 결과는 변수 num의 내용을 출력할 것입니다:

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

let func = test();
func(); // 1을 출력함

함수 외부에서 변수 num를 출력하려고 하면 접근할 수 없을 것입니다:

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

console.log(num); // 변수 num은 여기서 접근 불가

보시다시피, 지역 변수 num가 우리 함수의 렉시컬 환경에 바인딩되었고, 이제 코드 어디에서든 이 함수를 호출하면 변수 num의 값을 얻을 수 있습니다. 호출 지점 자체에서 이 변수에 접근할 수 없더라도 말이죠.

사실 변수 num를 전역으로 만들어 유사한 결과를 얻을 수 있습니다:

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

let num = 1; // 전역 변수
let func = test();
func(); // 1을 출력함

그러나 여기서는 중요한 차이가 있을 것입니다: 새 버전에서는 변수 num를 함수 외부에서 변경할 수 있습니다(전역 변수이므로). 이전 버전에서는 불가능했습니다.

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

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

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

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

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

console.log(test()());

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

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

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

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

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

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