자바스크립트에서 모듈 패턴은 코드를 모듈화하고 재사용 가능한 구성 요소를 만들기 위한 효과적인 방법입니다. 모듈 패턴을 사용하면 전역 변수 오염을 방지하고 캡슐화된 코드를 작성할 수 있습니다. 이번 튜토리얼에서는 ‘this’ 키워드를 사용하여 자바스크립트 모듈 패턴을 구현하는 방법에 대해 알아보겠습니다.

모듈 패턴이란?

모듈 패턴은 클로저를 활용하여 모듈의 범위(scope)를 생성하는 방식입니다. 이렇게 생성된 모듈은 외부에서 직접 접근이 불가능하며, API를 통해 제공된 함수 및 변수에만 접근할 수 있습니다. 이는 코드의 재사용성과 유지 보수성을 증가시키는 데 도움이 됩니다.

‘this’ 키워드를 사용한 모듈 패턴 구현

var myModule = (function() {
  var privateVariable = 'Private Variable';

  function privateMethod() {
    console.log('This is a private method.');
  }

  function publicMethod() {
    console.log('This is a public method.');
    console.log('Accessing private variable:', this.privateVariable);
    this.privateMethod();
  }

  // 모듈의 API로 공개할 메서드 및 변수를 리턴
  return {
    publicMethod: publicMethod,
    publicVariable: 'Public Variable'
  };
})();

myModule.publicMethod(); // 'This is a public method.'
                         // 'Accessing private variable: Private Variable'
                         // 'This is a private method.'

console.log(myModule.publicVariable); // 'Public Variable'

위의 예제에서 myModule은 즉시 실행 함수(IIFE)로 생성된 클로저입니다. 클로저 내에서는 privateVariable과 privateMethod가 private 멤버로 선언되어 외부에서 직접 접근할 수 없습니다.

publicMethod은 API로 공개된 메서드로, 외부에서 호출할 수 있습니다. 이 메서드는 ‘this’ 키워드를 사용하여 내부의 private 변수와 메서드에 접근할 수 있습니다. 따라서 publicMethod을 호출하면 private 변수와 메서드에 접근하고 실행할 수 있습니다.

myModule에서 공개된 publicVariable은 외부에서 바로 접근이 가능한 공개 변수입니다.

이제 ‘this’ 키워드를 사용하여 자바스크립트 모듈 패턴을 구현하는 방법을 익혔습니다. 모듈 패턴을 사용하면 코드의 가독성과 유지 보수성을 향상시킬 수 있으므로 프로젝트에서 모듈 패턴을 활용해 보는 것을 추천합니다.

#javascript #모듈패턴 #this키워드