모던 자바스크립트 Deep Dive 24장 클로저

먼저 13장 스코프 참고하기.

렉시컬 스코프

함수가 "어디에 정의"되었는지에 따라 상위 스코프를 결정한다. "외부 렉시컬 환경에 대한 참조"에 저장할 참조값(상위 스코프에 대한 참조)은 함수 정의가 평가되는 시점에 함수가 정의된 환경에 의해 결정된다. 이것이 렉시컬 스코프다.

클로저와 렉시컬 환경

함수의 내부 슬롯 [[Environment]]에 자신의 상위 스코프의 참조(자신이 정의된 환경)를 저장한다.

중첩 함수는 이미 생명 주기가 종료된 외부 함수의 변수를 참조할 수 있다. 이 중첩함수를 클로저라고 한다.

자바스크립트의 모든 함수는 상위 스코프를 기억하고 있다. 그러므로 이론상 모든 함수는 클로저다. 하지만 더 까다로운 조건을 만족해야 한다. ①상위 스코프의 식별자를 참조하고, ②생명 주기가 외부함수의 것보다 길어야 한다.

클로저 예제

foo 함수 안의 bar 함수는 중첩함수로 클로저다.

function foo(){
	const x = 1;
	const y = 2;
	
	function bar(){
		console.log(x);
	}
	return bar;
}

const bar = foo();
bar();

자유 변수

클로저(중첩 함수)에 의해 참조되는 상위 스코프의 변수(위 예제에서 foo 함수의 변수 x)다. 이로써 클로저란 "함수가 자유 변수에 대해 닫혀있다."라고 해석할 수 있다. "자유 변수에 묶여있는 함수"

클로저의 활용

상태를 안전하게 변경하고 유지하기 위해 사용한다. 상태를 은닉할 수 있다. 정보 은닉이란 캡슐화를 일컫는데, 객체의 프로퍼티와 메서드를 하나로 묶는 것을 말한다.

클로저 예시

// Define the closure
var rentPrice = function(initialRent) {
var rent = initialRent;

	// Define private variables for
	// the closure
	return {
	getRent: function() {
		return console.log(rent);
	},
	incRent: function(amount) {
		rent += amount;
		console.log(rent);
	},
	decRent: function(amount) {
		rent -= amount;
		console.log(rent);
	}
	}
}

var Rent = rentPrice(8000);

// Access the private methods
Rent.incRent(2000);
Rent.decRent(1500);
Rent.decRent(1000);
Rent.incRent(2000);
Rent.getRent();

https://www.geeksforgeeks.org/what-is-the-practical-use-for-a-closure-in-javascript/

클로저 현실 상황 예시

https://blog.devgenius.io/a-real-time-example-of-javascript-closure-b10687d66e72