클로저


클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다.



Lexical Scope

  • 변수나 함수의 유효 범위를 결정하는 규칙
  • 해당 변수나 함수가 코드에서 어디에 선언되었는지에 따라 스코프가 정적으로 결정
  • 프로그램을 작성할 때 코드 구조에 따라 스코프 설정
  • 이를 통해 변수와 함수가 어디서 유효한지 예측 가능



Closure

→ 함수가 속한 렉시컬 스코프를 기억하여 함수가 렉시컬 스코프 밖에서 실행될 때도 그 스코프에 접근할 수 있게 하는 기능


사용 이유

  1. Private 변수/함수 : 변수와 함수를 외부에서 접근할 수 없도록 보호 가능 → 정보 은닉(Encapsulation) 구현 가능
  2. 지속성 : 함수가 선언될 때의 환경 기억 → 변수 값의 지속성을 유지하고, 다음 호출에서 사용 가능
  3. 콜백 함수 및 비동기 프로그래밍 : 콜백 함수로 전달되는 상태 정보 유지 및 비동기 작업에서 중요한 역할
  4. 모듈 패턴 : 모듈화된 코드를 작성 가능 → 코드의 구조화 및 재사용성 상승
  5. 메모리 관리 : 필요한 상태만 유지 → 효율적인 메모리 관리

예시

클로저 사용 X

const h1El = document.querySelector('h1');
const h2El = document.querySelector('h2');

let h1IsRed = false;
let h2IsRed = false;

h1El.addEventListener('click', event => {
	h1IsRed = !h1IsRed;
	h1El.style.color = h1IsRed ? 'red' : 'black';
});

h2El.addEventListener('click', event => {
	h2IsRed = !h2IsRed;
	h2El.style.color = h2IsRed ? 'red' : 'black';
});

→ 별도의 상태 관리 필요

클로저 사용 O

const h1El = document.querySelector('h1');
const h2El = document.querySelector('h2');

const createToggleHandler = () => {
	let IsRed = false;

	return event => {
		isRed = !isRed;
		event.target.style.color = isRed ? 'red' : 'black';
	}
}

h1El.addEventListener('click', createToggleHandler());
h2El.addEventListener('click', createToggleHandler());

→ 하나의 함수로 정리하여 재사용



references
👉 https://c4u-rdav.tistory.com/85