Javascript 클로저 (Closure) 내가 이해하는 방식으로 정리 1

console.log('hihi');

오늘 정리킹이 정리해볼 내용은

Closure 클로저

대충 글로 읽고만 있으니까 도저히 도저히 도대체가 

도무지 마음에 와 닿지가 않는다.

그래서 일단은 내가 대충 코드를 짜 보면서 이해를 해 볼 생각이다.

물론 MDN을 통해 내가 얻은 지식들이다.

---

일단 스코프(scope) 의 대한 정리부터

function outer() {
	let x = 1;
    function inner() {
    	x = x+ 1;
        console.log(x);
    }
    console.log(inner());
    return inner;
}

 자 여기 함수가 두 개가 있다.  outer 와 inner

inner 는 outer안에서 정의가 되었고, outer의 return , 즉 결과 값이 될 녀석이다.

여기서 outer를 실행시키면

outer의 결과 값

콘솔에 inner 를 한번 실행시킨 값이 2가 한번 찍히고 return 값으로 inner 함수가 출력된다. 

⭐️ inner 가 본인 스코프(scope) 밖의 변수 x에 접근을 할 수 있다.
⭐️ 단순히 생각해서 inner 함수만의 새로운 전역변수로 x 가 생긴 걸로 이해했다.
     근데 사실 그 전역 변수 x는 outer 안 쪽에 있다.

---

자 이런 결과를 내는 outer함수를 아래의 두 변수에 담아보려고 한다.

let ENom = outer();
let JeoNom = outer();

'이놈' 과, '저놈'을 확인해보자

이놈과 저놈

여기서 이놈 과 저놈 이 클로저가 되는듯하다. 이 시점에서 이놈 을 한 번 실행해본다.

이놈의 실행결과 1

3이 된다.  ? 이놈은 실행 전에 단순히 함수만을 나타냈는데
실행결과의 x값은 어떻게 3이 나올 수 있었을까?

이게 클로저라서 그렇다. 이놈 이 가지고 있는 x는

이놈 에게 outer()의 결과를 참조? 시킬 때 계산이 되었던 2를 값으로 가지고 있다.

그니까 사실 이놈 은

...

function Enom() {
	let x = 2;
	x = x + 1;
	consol.log(x);
}

이 형태가 되어버렸다. 라고 대충 이해를 하고자 한다.

저놈 도 마찬가지다.

⭐️ 단순하게 이놈, 저놈 은 inner() 함수를 의미하지만 사실 'outer 안에 담긴' inner를 의미하며
➕ 'outer 안에 있으며 inner가 사용하는 변수까지' 를 가지고 있다고 보면 될 것 같다.

➕ 자 이제 또 기억할만한 포인트가 나온다.

이놈 한 번, 저놈 한 번 순서대로 실행을 할 거다.

둘의 x 값이 다르게 나온다.

이놈 은 처음 참조될 때 실행된 2에서 2번 이놈 을 실행했기 때문에 2 -> 3 -> 4
저놈은 처음 참조될 때 실행된 2 에서 1번 저놈 을 실행했기 때문에 2 -> 3

만약 같은 x를 공유하고 있다면, 저놈 을 실행했을 때 결과가 5가 나와야 한다.
( 2 -> 3 -> 4 [이놈 2번] -> 5 [저놈 1번] )

즉 같은 outer로부터 다른 x가 이놈 과 저놈 에게 따로 저장이 된 거라고 생각을 할 거다.

그래서 위에 '이 형태가 되어 버렸다.'라는 말을 했을 때

x의 선언을 let으로 한 것이 정확하다고 느껴진다.

 

---

아오.. 헷갈린다. 하지만 이렇게 정리를 하고 나니 어느 정도 이해가 된다. 일단

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

클로저

이 MDN 사이트의 나온 말들은 너무 공식적?이라서 직관적으로 받아들이기 힘들었다.

그래서 내 말로 바꿔서 정리해봤다. 

그리고 아직 MDN에 실린 내용을 모두 정리하지 않았다...

 남은 건 다음에 ㅠ

---

지친다... 뭔가 맛있는 걸 먹고 싶어 진다. 예를 들면 이런..

 

console.log('See YA! World~');