클로저 모듈 패턴에 대해

이전에는 스코프와 클로저에 대해 알아 봤다.

복기해보자면,

스코프는 변수의 접근 범위를 말하고, 스코프 체인은 스코프 내부에서 스코프 체인을 따라 가장 바깥쪽 외부까지 접근하는걸 말한다.

클로저는 함수를 리턴하는 함수인데, 내부 함수는 외부 함수에 선언된 변수에 접근 가능하다.

자세한 내용은 이전 글에서 확인 가능하다

https://do-youit.tistory.com/23

 

클로저 모듈 패턴이란?

클로저를 이용해 내부 함수를 단 하나만 리턴하는 것에 그치지 않고, 객체에 담아 여러개의 내부 함수를 리턴하도록 만든다.

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

const counter1 = makerCounter();

• makeCounter는 increase, decrease, getValue메서드를 포함한 하나의 객체를 return 한다.
• makeCounter함수에서 선언된 value 값을 return안에 있는 increase, decrease, getValue 메서드를 통해서 값을 수정할 수 있다.
• counter1은 객체이다.
• makeCounter 함수를 바꾸지 않고, value라는 변수의 값을 새롭게 할당 할수 있나? => 없다!
  • 스코프 규칙에 의해 불가능하다
  • 이것이 바로 정보의 접근 제한(캡슐화)이다.
  • 왜이렇게 할까? 만약 스코프로 value 값을 감싸지 않았다면, value 값은 전역 변수여야만 했을 것이다. 하지만 makeCounter 함수가 value 값을 보존하고 있기에 전역 변수로 따로 만들 필요가 없다.
  • 전역 변수가 좋지 않은 점은, 전역 변수는 다른 함수 혹은 로직 등에 의해 의도되지 않은 변경을 초래하기 때문입니다. 이를 side effect라고 한다. side effect를 최소화화면, 의도되지 않은 변경을 줄일 수 있다.
• 앞선 예제는, 단 한개의 카운터만 만들수 있는건 아니다.
  makeCounter 코드는 그대로 활용하고, getValue 메서드는 외부 함수에 선언된 value값을 리턴하는 함수이다.
  counter1과 counter2에서 각각 어떤 값을 리턴하고 있나?

const counter1 = makeCounter();
counter1.increase();
counter1.decrease();
counter1.getValue();

const counter2 = makeCounter();
counter2.increase();
counter2.decrease();
counter2.getValue();

• makeCounter에 의해 리턴되는 객체는, makeCounter를 실행할때에 선언되는 value값을 각자 독립적으로 가지게 된다. 따라서 counter1에서의 value와 counter2에서의 value는 서로 영향을 끼치지 않고, 각각 값을 보존할 수 있다.
• 이와 같이 함수 재사용성을 극대화 하여, 함수 하나를 완전히 독립적인 부품 형태로 분리하는 것을 모듈화라고 한다. 클로저를 통해 데이터와 메서드를 같이 묶어서 다룰 수 있다. 즉, 클로저는 모듈화에 유리하다.