클로저

✍️ 프론트 개발자 면접 질문에 많이 나온다는 클로저를 정리 해보았다. 숨 쉬듯이 많이 쓰는 패턴인데, 막상 말로 설명하려니 입이 안 떨어지기에 글로 정리해 보았다.

클로저 란?

외부 변수를 기억하고, 외부 변수에 접근 할 수 있는 내부 함수.

• 함수 안의 함수(= 중첩 함수, innerFunc) 가 선언 됐을 때의 스코프 (= Lexical enviroment, outerFunc 안의 스코프)을 기억함.
• 밖에서 호출 되어도 중첩 함수 밖의 환경(= outerFunc 안에 선언된 변수 x)에 접근 가능.

function outerFunc() {
  let x = 10;
  let innerFunc = function () { 
		console.log(x); 
	};
  return innerFunc();
}

outerFunc(); // 10

장점

1. 현재 상태를 기억하고 변경된 상태 값 유지

   • counter 함수 실행 시 마다 기존의 count 값을 기억하고, 누적된 값을 반환 함. ( count 값이 0으로 초기화 되지 않음.)

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

2. 전역 변수 사용 억제

   • 위의 counter 함수를 클로저를 사용하지 않고 count를 전역변수로 빼서 표현하면 다음과 같다.

   let count = 0;
   
   const counter = function(){
   	return ++count;
   }
   
   counter();

   • count 가 전역변수로 나오게 되면, 다른 외부 요소에 의해 변형 될 수 있음.

3. 정보 은닉

   • counter() 호출 코드만 보고서는 counter 함수 안에 존재하는 변수 값(=count)을 알 수 없음.

참고 문헌

• https://poiemaweb.com/js-closure
• https://ko.javascript.info/closure