이런저런 IT 이야기
article thumbnail
Published 2023. 5. 25. 14:14
Module 패턴 Javascript
반응형

Module 패턴은 코드를 모듈화하고 캡슐화하기 위한 패턴입니다. 이 패턴은 전역 네임스페이스의 오염을 방지하고 코드의 의존성을 관리하는데 사용됩니다. 모듈 패턴은 코드를 구성하는 함수, 변수, 객체 등을 비공개(private)와 공개(public) 멤버로 나누어 사용합니다.

Module 패턴은 함수의 클로저 기능을 이용하여 모듈의 비공개 멤버를 생성하고 반환하는 패턴입니다. 비공개 멤버는 모듈 내부에서만 접근할 수 있고, 공개 멤버는 외부에서 접근할 수 있는 인터페이스 역할을 합니다. 이를 통해 모듈의 상태와 동작을 캡슐화하고 외부에 공개할 필요가 있는 기능만 노출시킬 수 있습니다.

다음은 JavaScript에서 Module 패턴을 사용하여 모듈을 정의하는 간단한 예제입니다:

const MyModule = (function() {
  // 비공개 멤버
  let privateVar = 'Private variable';

  function privateFunction() {
    console.log('Private function');
  }

  // 공개 멤버
  return {
    publicVar: 'Public variable',

    publicFunction: function() {
      console.log('Public function');
    },

    getPrivateVar: function() {
      return privateVar;
    }
  };
})();

// 모듈 사용
console.log(MyModule.publicVar); // "Public variable"
MyModule.publicFunction(); // "Public function"
console.log(MyModule.getPrivateVar()); // "Private variable"

위의 예제에서 MyModule은 모듈을 정의하는 함수로, 즉시 실행되는 함수 표현식(IIFE)으로 감싸져 있습니다. 이를 통해 모듈은 단 한 번만 실행되고, 비공개 멤버와 공개 멤버로 구성됩니다.

privateVar와 privateFunction은 모듈 내에서만 접근 가능한 비공개 멤버입니다. publicVar, publicFunction, getPrivateVar는 외부에서 접근할 수 있는 공개 멤버로, 모듈의 인터페이스 역할을 수행합니다.

const CounterModule = (function() {
  let count = 0;

  function increase() {
    count++;
  }

  function decrease() {
    count--;
  }

  function getCount() {
    return count;
  }

  return {
    increase,
    decrease,
    getCount
  };
})();

// 모듈 사용
console.log(CounterModule.getCount()); // 0
CounterModule.increase();
CounterModule.increase();
console.log(CounterModule.getCount()); // 2
CounterModule.decrease();
console.log(CounterModule.getCount()); // 1

위의 예제에서 CounterModule은 카운터 기능을 제공하는 모듈을 정의하는 함수로 구성됩니다. 비공개 멤버인 count 변수와 비공개 함수인 increase, decrease는 모듈 내부에서만 접근 가능합니다. getCount는 외부에서 현재 카운트 값을 조회하는 공개 함수로 사용됩니다.

CounterModule 모듈을 사용하여 카운터 값을 증가 및 감소시키고, 현재 카운트 값을 조회할 수 있습니다. 이를 통해 카운터 기능을 캡슐화하고 모듈 외부에서는 카운터 상태에 직접 접근할 수 없도록 보호합니다.

이를 통해 모듈의 비공개 멤버와 상태를 보호하면서 필요한 기능을 공개적으로 사용할 수 있습니다. 또한, 전역 네임스페이스의 오염을 방지하고 코드의 모듈성을 향상시킬 수 있습니다.

반응형

'Javascript' 카테고리의 다른 글

제너레이터 함수(Generator Function)  (0) 2023.05.25
JavaScript 메모리 관리 Heap(힙)과 Stack(스택)  (0) 2023.05.25
Observer 패턴  (0) 2023.05.25
Proxy 패턴  (0) 2023.05.25
[Javascript] Sort, Splice, Slice 정리  (0) 2023.05.24
profile

이런저런 IT 이야기

@이런저런 IT 이야기

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

profile on loading

Loading...

검색 태그