클로저는 내가 scope에 대해 알고 있다 보니 그렇게 어렵게 느껴지지는 않았다.

클로저에 대해 알아보자 !

❓ 클로저(Closure)란?

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

• 쉽게 설명하면 클로저는 외부함수의 변수에 접근할 수 있는 내부 함수를 말한다.

  클로저를 이해하기 위해서는 자바스크립트가 어떻게 변수의 유효범위를 지정하는지 (Lexical scoping)를 먼저 이해해야한다.

✅ 어휘적 범위 지정(Lexical scoping)

function init() {
	// name은 init에 의해 생성된 지역 변수
	var name = "Mozilla";
	
	//displayName()은 내부 함수이며, 클로저
	function displayName(){
		//부모 함수에서 선언된 변수를 사용
		alert(name);
	}
	displayName();
}
init();

이 코드를 실행하면 init함수 안에 지역 변수 name과 displayName를 생성한다. 여기서 displayName함수에서는 부모 함수(외부 함수)에서 선언된 name 변수를 사용할 수 있게 된다. 이렇게 외부함수에 접근할 수 있는 내부 함수를 클로저라고 뜻한다.

여기서 lexical은 어휘적 범위 지정 과정에서 변수가 어디에서 사용 가능한지 알기 위해 그 변수가 소스코드 내 어디에서 선언되었는지 고려한다는 것을 의미한다.

즉, 외부함수 스코프에서는 내부함수 스코프로 접근이 불가능하고, 내부함수에서는 외부함수에서 정의된 변수에 대해 접근이 가능하다. 이것을 클로저라 한다.

---

✅ 클로저 은닉화

• 전역변수를 통해서 공유될 변수를 작성하는데, 이렇게 하면 오류가 발생할 확률이 매우 높아진다. 그 이유는 누구든 이 전역변수에 접근이 간으하기 때문에 의도치 않게 변경이 될 때가 있다. 따라서 클로저를 이용하면 이러한 문제를 해결할 수 있다.

• Information Hiding

• 외부로부터 데이터를 감추는 것

• private으로 감춘다.

• 내부적으로 사용해야하는 경우 감춘다.

IIFE(Immediately Invoked Function Expression)

• 정의(=선언)하는 즉시 실행되는 함수이다.
• 함수를 즉시 실행함으로써, 전역 객체의 오염을 방지할 수 있다.
• 인터프리터가 빠르게 해당 코드를 처리할수 있다.

(function () {
  console.log("IIFE")
})();

은닉화를 해야하는 경우는 오염을 방지하기 위해서다. 전역변수로 둘 경우 쉽게 여기저기서 접근이 가능하기 때문에 의도치 않게 변할 것이다. 또한, 외부로부터 데이터를 감출 수 있다.

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

count가 하나씩 증가하는 코드인데, 만약 count가 전역변수로 선언이 된다면 위험한 코드가 됐을 것이다 왜냐면 여기저기서 쉽게 접근이 가능하기 때문에 의도치 않게 변할 수 있기 때문이다.

따라서, 이렇게 하면 클로저를 이용해 내부로 철저히 숨김으로써 데이터를 은닉화 할 수 있다.

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures