클로저

클로저란?

사전적 정의: 함수와 함수가 선언된 어휘적 환경의 조합

• 어휘적 환경: 변수 및 함수 선언의 형태 (쉽게 말해서 내부 함수 주변의 어떤 문자들..?)

클로저 함수는 외부 함수의 컨텍스트에 접근할 수 있는 내부 함수

클로저는 리턴하는 함수에 의해 스코프(변수의 접근 범위)가 구분

클로저의 핵심은 스코프를 이용해서, 변수의 접근 범위를 닫는(closure; 폐쇄) 데에 있음

내부 함수는 외부 함수에 선언된 변수에 접근 가능(반대는 불가능)

클로저의 활용(장점)

1. 데이터를 보존할 수 있다

   일반적인 함수는 함수 실행이 끝나고 나면 함수 내부의 변수를 사용할 수 없다.

   클로저는 외부 함수의 실행이 끝나더라도 외부 함수 내 변수가 메모리 상에 저장되어 사용이 가능하다.

   const adder = function (x) {
   	return function (y) {
   		return x + y;
   	}
   }
   
   const add5 = adder(5); // 함수 실행이 끝나도 5 라는 값이 저장되어 재사용이 가능함
   add5(0); // 5
   add5(1); // 6
   add5(6); // 11
   add5(10); // 15

2. 정보의 접근 제한 (캡슐화)

   클로저 모듈 패턴을 사용해 객체에 담아 여러 개의 함수를 리턴하도록 만든다.

   const makeCounter = () => {
     let value = 0;
   
     return {
       increase: () => {
         value = value + 1
       },
       decrease: () => {
         value = value - 1
       },
       getValue: () => value
     }
   }
   
   const counter1 = makeCounter();
   counter1 // {increase: ƒ, decrease: ƒ, getValue: ƒ}

   이 상태에서 makeCounter 함수를 바꾸지 않고, value라는 변수에 값을 새롭게 할당할 수 있는 방법은?

   → '외부 스코프에서는 내부 스코프의 변수에 접근할 수 없다'라는 규칙에 의해, 어떤 경우에도 value는 직접 수정이 불가능하다.
   대신, 리턴하는 객체가 제공하는 메서드를 통해 value 값을 간접적으로 조작할 수 있다.

   이러한 정보의 접근을 제한하는 것을 캡슐화라고 한다.

3. 모듈화에 유리

   클로저 함수를 각각의 변수에 할당하면 각자 독립적으로 값을 사용하고 보존할 수 있다. (서로 영향을 끼치지 않는다)

   // 여러 개의 counter를 만드는 것이 가능
   const counter1 = makeCounter();
   counter1.increase();
   counter1.increase();
   counter1.decrease();
   counter1.getValue(); // 1
   
   const counter2 = makeCounter();
   counter2.decrease();
   counter2.decrease();
   counter2.decrease();
   counter2.getValue(); // -3

   이와 같이 함수 재사용성을 극대화하여, 함수 하나를 완전히 독립적인 부품 형태로 분리하는 것을 모듈화라고 한다.

   클로저를 통해 데이터와 메서드를 같이 묶어서 다룰 수 있어 클로저는 모듈화에 유리하다.

클로저에 대해 찾아볼수록 머리가 더 복잡해지는 기분이다...🥲
정의를 찾아보는데 한국말이 맞나?
아직 클로저가 왜 필요한지 몰라서 이해가 안갈수 있다는 친구의 말에 동기 비동기까지 찾아보다가 과부하가 왔다.
머리 좀 식히고 추후에 개념이 정리되면 내용을 수정하러 와야겠다.