Javascript-10 (클로저 Closure)

클로저(Closure)를 알고 싶은데 정말 보는것마다 너무 헷갈렸다.
클로저에 대해 찾아본 강의와 책만 해도 몇 개나 되었는데, 물론 그 정도 찾아보면 조금은 알 수있다.
그럼에도 설명할 수 있을만큼은 뭔가 완벽하게 아는것은 아닌 것 같았다.
하지만 시간을 두고 다른 공부를 더 하다가 다시 찾아봤을 때 조금 더 이해가 되는 것 같은 기분이 들었다.

그래서 그런 것들을 조금 작성 해놓으려고 한다!!

---

우선 클로저(Closure)라는 것은 함수와 Lexical 환경의 조합을 말한다.
(이미 이런 말부터 어렵다... ㅠㅠ)

내가 가장 처음 이해했던 말은 생활코딩에서 나온 것으로써

function outter() {
	let title = 'Excellent Coding';
	return function() {
		alert(title);
	}
}

inner = outter();
inner(); // Excellent Coding이 alert창으로 나온다!

이런 예시가 있을 때, outter function은 return을 하면서 생을 마감 해야하는데, 그럼에도 inner()는 outter에서 title을 찾는 것이다.
즉, 외부함수의 실행이 끝나서 기능을 소멸한 이후에도 내부함수가 외부함수의 변수에 접근이 가능한 것을 말한다!

이는 편리할 수도 있겠지만, 기억이 된다는 것은 곧 메모리가 사용되는 것이므로 메모리 누수 원인이 될 수도 있다!

---

---

let one;
one = 1;

function addOne(num) {
	console.log( one + num );
}

addOne(5)

이런 예시가 있다면 이는 위에서 아래로 어떻게 동작하는지 알아보자!
1. 코드가 실행 되면 JS 안의 변수들(one, addOne)이 Lexical 환경에 들어간다 (전역 Lexical 환경)
⇒ one의 경우, Lexical 환경에 들어갔지만 초기화가 되어있지않아서 사용은 불가하다
⇒ addOne의 경우, 함수 선언문은 변수와 달리 바로 초기화가 되므로 사용가능하다

2. let one; : 아직 할당은 안되었으므로 초기값 undefined를 갖는다
   ⇒ 초기화가 되었으므로 이제 사용가능하다! (err가 아닌 undefined일 뿐!)

3. one = 1; : one에 숫자1이 할당 되었다

4. function part : 함수 선언은 이미 초기에 되었으므로 마지막으로 넘어간다

5. addOne(5); : addOne이 실행되면서 새로운 Lexical 환경이 만들어진다 (내부 Lexical 환경)
   ⇒ 이곳에는 함수가 넘겨받은 매개변수와 지역변수가 저장된다
   ⇒ 내부 Lexical 환경은 전역 Lexical 환경에 대한 참조를 갖는다.
   즉, 코드에서 변수를 찾을 때 내부에서 없으면 외부, 외부에도 없으면 전역에서 찾는다

6. console.log( one + num )

   1. 처음에는 내부Lexical 환경에서 찾는다
   2. num=5는 찾았지만, one이 없으므로 전역 Lexical 환경에서 찾아보고 one이 있으면 더해준다

   내부 Lexical에서 찾고, 없으면 외부 Lexical에서 찾고, 거기도 없으면 전역 Lexical에서 찾게 된다
   => 이렇게 연결 되어있는것이 바로 Scope Chain이다!