즉시 실행 함수란?

선언하자 마자 실행되고 소멸되는 함수

(() => {
	// code
})(); 

// 또는 

(function() {
	// code
})();

전역 변수를 통해 이벤트 할당

• numClicks라는 전역변수를 두어 상태를 관리
• 이 경우, numClicks라는 변수명을 다른 곳에서 사용할 경우 변수가 오염됨

let numClicks = 0;
const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
	numClicks++;
	console.log(numClicks);
});

Private 변수를 통해 이벤트 할당

• 즉시 실행 함수로 감쌀 경우, numClicks라는 변수는 클로저에 의해 btn 객체만 참조할 수 있으며, 다른 곳에서는 참조가 불가능한 독립적인 공간이 생겨서 변수 오염이 줄어듦

(() => {
	let numClicks = 0;
	const btn = document.querySelector('#btn');
	btn.addEventListener('click', () => {
		numClicks++;
		console.log(numClicks);
	});
})();

[자바스크립트 닌자] 클로저가 무엇이고 왜 쓰는걸까?(2)