[JS ] 모듈 패턴 (Module Pattern)

 

 

 

 

 

📌  모듈 패턴은 특정 구성요소를 다른 구성요소와 독립적으로 유지하는 패턴을 말한다.

• 장점: 재사용성을 높히기 위한 코드를 작성할 때 유용하다
• 단점: 코드가 길어지고 파일 크기도 늘어난다

 

 

🚀 모듈 패턴 (Module Pattern)

모듈은 프로젝트의 코드를 간결하고 재사용성이 좋은 구조로 작성하는 데 도움을 주며,

모듈을 구현하는 가장 쉬운 방법은 객체 리터럴을 사용하는 방법이다.

 

var obj = {
  key: 'value',
  method: function () {
    console.log('hello world');
  }
}

 

객체 리터럴은 사용하기 편하지만 위와 같이 작성했을 경우 보안에 취약하다.

 

자바스크립트에서 리터럴을 사용할땐 글로벌 공간에 변수를 선언하는 것은 되도록 피해야 한다.

 

const PlusMinus =(function () {
  let num = 0;
  
  return {
     plus: function () {
       num++;
     },
     minus: function () {
       num--;
     },
     getNum: function () {
       return num;
     }
  } 
})()

 

위와 같이 클로저나 익명 함수를 사용하여 객체를 리턴하고 변수를 함수 안에 선언하여 보호한다.

 

위 코드는 함수를 익명 함수로 감싸 변수를 보호할 수 있고, 재사용성을 높일 수 있다.

 

(function () {
  function plusMinus () {
    let num = 0;
  
    return {
       plus: function () {
         num++;
       },
       minus: function () {
         num--;
       },
       getNum: function () {
         return num;
       }
    }
  }
  
  let num1 = plusMinus();
  let num2 = plusMinus();
  
})()