[리액트 기초 스터디] JavaScript 클로저 (Closuer)

목차 (OPEN)

• 📑 JavaScript 클로저(Closuer)
• 🟥 예제 1) 기본적인 클로저
• 🟧 예제 2) 클로저 없이 구현했을 때와 비교해보기
• 🟨 예제 3) 여러 클로저 인스턴스
• 🟩 스코프 체인과 클로저의 관계
• 📚 결론

 

 

 

 

 

 

📑 JavaScript 클로저(Closuer)

앞선 포스팅에서 살펴봤던 것처럼

자바스크립트에서는 함수가 변수를 찾을 때 스코프 체인을 따라 바깥쪽까지 거슬러 올라가게 된다.

 

(이전 포스팅 참고)

[리액트 기초 스터디] JavaScript 스코프 체인 (Scope Chain)

 

그런데 이때 한 가지 특별한 현상이 생기는데, 이게 바로 클로저(Closuer)이다.

 

 

간략하게 말하자면 클로저란,

함수가 자신이 선언될 당시의 스코프(환경)를 기억해서,

그 스코프 바깥에서 실행되더라도 접근할 수 있는 현상을 말한다.

 

조금 어렵게 느껴질 수도 있는데,

그냥 '함수가 태어났을 당시의 주변 환경을 평생 기억하는 능력'이라고 생각하면 된다.

 

 

---

🟥 예제 1) 기본적인 클로저

function outer() {
  let count = 0; // outer 함수의 지역 변수
  
  function inner() {
    count++;
    console.log(count);
  }
  
  return inner; // inner 함수 반환
}

count colsuerFunc = outer();

closureFunc(); // 1
closureFunc(); // 2
closureFunc(); // 3

 

이 예제 코드에서 일어나는 일은 아래와 같다.

1. outer() 가 실행되면서 count = 0이 생기고, inner 함수를 반환한다.
2. closuerFunc은 inner를 가리킨다.
   (outer 함수가 inner 함수를 반환했으니까)
3. inner 를 실행할 때마다 count에 접근해서 값을 바꿀 수 있다.

 

여기에서 주목할 점이, 원래라면 outer 실행이 끝나면 count 는 사라져야 하는데,

inner 가 count를 계속 기억하고 있기 때문에 count 가 살아남는다는 점이다.

그리고 이게 바로 클로저이다.

 

 

---

🟧 예제 2) 클로저 없이 구현했을 때와 비교해보기

let count = 0;

function increase() {
  count++;
  console.log(count);
}

increase(); // 1
increase(); // 2
increase(); // 3

 

이렇게 해도 위의 예제 1에서 봤던 것처럼 1 2 3 이 출력되기는 하지만,

이 코드에서는 count 가 전역에 노출되어 있다.

따라서 누구나 count 값을 바꿔버릴 수가 있다는 위험이 있다.

 

 

이 코드와 예제 1의 코드를 비교해보면 클로저의 장점이 확연히 드러난다.

바로, 데이터 은닉과 안전한 상태 관리가 가능하게 된다는 점이다.

(실제로 예제 1의 코드에서는 count 를 외부에서 직접 건드리는 것은 불가능하고,

오직 inner 함수를 통해서만 제어할 수 있었다는 것을 보면 알 수 있다.)

 

 

---

🟨 예제 3) 여러 클로저 인스턴스

그렇다면 이 코드는 어떨까?

function makeCounter() {
  let num = 0;
  
  return function () {
    num++;
    return num;
  };
}

const counter1 = makeCounter();
const counter2 = makeCounter();

console.log(counter1()); // 1
console.log(counter1()); // 2
console.log(counter2()); // 1 (counter1과는 별개로 동작함)

 

이 코드에서는 counter1에서 makeCounter를 호출할 때와

counter2에서 makeCounter를 호출할 때

서로 다른 독립적인 환경(num)이 만들어지게 된다.

 

그래서 당연히 counter1과 counter2는 서로 영향을 주지 않게 된다.

 

 

이처럼 클로저마다 독립적인 기억 공간을 가진다는 점은 굉장히 중요한 포인트다 !

 

 

---

🟩 스코프 체인과 클로저의 관계

내가 처음 이 예시들과 함께 스코프를 공부할 땐,

'오 ~~ 신기하다 !!' 하면서 쭉 보긴 했는데 ..

문득 다 보고 나니 '그래서 결론적으로 스코프체인이랑 클로저가 무슨 관계라는 거지?' 싶었었다.

 

그래서 이렇게 다시 한 번 요약해서 정리해보면 아래와 같다.

 

 

 

일단, 스코프 체인이라는 것은 함수 안에서 변수를 찾을 때

자기 스코프 👉🏻 바깥 스코프 👉🏻 그 바깥 스코프 👉🏻 ... 👉🏻 전역 스코프

이런 식으로 밖으로만 거슬러 올라가며 탐색한다는 것이었다.

 

즉, 여기까지에서의 핵심은,

함수는 자신이 선언될 당시의 스코프를 기억한다는 점이다.

(기억을 하니까 자기 스코프부터 시작해서 바깥 스코프로 탐색을 하겠죠?)

 

 

 

그럼 이제 클로저에 대해서 다시 정리해보면,

함수가 선언될 당시의 스코프를 기억해서, 그 스코프 바깥에서 실행되더라도 접근할 수 있는 현상이었다.

 

 

그래서 아까 봤던 예제를 다시 가져와서 설명하자면,

function outer() {
  let count = 0; // outer 함수의 지역 변수
  
  function inner() {
    count++;
    console.log(count);
  }
  
  return inner; // inner 함수 반환
}

count colsuerFunc = outer();

closureFunc(); // 1
closureFunc(); // 2
closureFunc(); // 3

 

1. inner 함수가 실행될 때 count 변수를 찾는다.
2. 일단 자기 스코프에는 없으니까 스코프 체인을 따라 outer 스코프로 올라간다.
3. 그래서 outer 의 지역 변수인 count를 계속 쓸 수 있는 것이다.

 

이처럼, 비록 outer() 의 실행은 끝나긴 했지만,

inner가 outer의 환경을 스코프 체인으로 기억하고 있으므로 count를 계속 사용할 수 있는 것이다.

 

 

그래서 다들 클로저는 스코프 체인을 이용해서 바깥 변수를 기억하고 활용하는 것이라고 부르는 거였다.

 

 

---

📚 결론

처음 클로저에 대해서 알게 됐을 땐, '어떻게 함수가 실행이 끝나는데 변수를 계속 기억하지?' 싶었는데,

알고보니 이것도 자바스크립트의 스코프 체인 덕분에 가능한 현상이라는 것을 알 수 있었다.

 

특히 클로저를 이용하면 외부에서는 직접 접근하지 못하는 비밀스러운 변수를 만들 수 있다는 점이 가장 인상 깊었다.

 

앞으로는 클로저를 이용해서 안전하게 캡슐화하는 습관을 들여도 좋을 것 같다.