Module Pattern

📌 목차

• Introduction
• Module Pattern 이란?
• Moudle Pattern 구현
• Module Pattern의 장단점
• Conclusion
• Reference

📌 Introduction

안녕하세요! 이번 포스팅에서는 자바스크립트에서 module pattern에 대해서 공부해보겠습니다.🎉 Singleton 패턴과는 비슷하지만 Singleton처럼 하나의 instance만 만드는것이 아닌 다수의 instance를 만드는 것이 module pattern 입니다!

📌 Module Pattern 이란?

Module pattern이란 전체 어플리케이션 일부를 독립된 코드로 분리하여 만드는 것 입니다. 다른 여타 프로그래밍 언어처럼 자바스크립트는 접근 제한자(public, private,...)가 없기 때문에 closure를 이용하여 구현합니다.

📌 Module Pattern 구현

간단하게 countModule을 구현해보겠습니다.

const countModule = (() => {
  // privacy
  let count = 0;

  return {
    increment: () => {
      count++;
      console.log(count);
    },
    decrement: () => {
      count--;
      console.log(count);
    }
  }
})();

countModule.increment(); // 1
countModule.decrement(); // 0
console.log(countModule.count) // undefined

countModule은 이렇게 구현을 해볼수 있습니다. count 변수는 private하게 되어집니다. (testMoudle.count === undefined 인걸로 알수 있습니다.)

간단하게 return 아래는 public 위는 private이라고 생각하면 좋습니다. 다음은 countModule에서 private 함수도 한번 선언해볼게요!

const countModule = (() => {
  // private variable
  let count = 0;

  // private function
  const reset = () => {
    count = 0;
  };

  return {
    increment: () => {
      count++;
      console.log(count);
    },
    decrement: () => {
      count--;
      console.log(count);
    },
    makeCount100: () => {
      reset();
      count += 100;
      console.log(count);
    }
  }
})();

countModule.increment(); // 1
countModule.decrement(); // 0
console.log(countModule.count); // undefined
countModule.makeCount100(); // 100
console.log(countModule.reset); // undefined

이런식으로 private한 function도 만들 수 있습니다.

📌 Module Pattern의 장단점

장점

• private 변수를 만들 수 있다!
• 객체지향 관점의 개발자들의 가독성을 높인다.

단점

• private과 public 변수 접근이 다르다.
• private한 변수들에 대한 테스트가 어렵다.

📌 Conclusion

이번 포스팅에서는 module pattern에 대해서 알아봤습니다. 제 경우 Module pattern을 이용해서 vuex store를 생성하는데 좀더 도움을 줬었습니다. 그럼 다음 포스팅에서 만나요~😎

📌 Reference

• Yuby's lab
• 제로초
• recordboy.log