자바스크립트 변수의 모듈 처리 방법

09 Sep 2023

javascript

자바스크립트는 동적인 언어이기 때문에 전역 변수의 남발로 인해 코드의 유지보수성이 저하될 수 있습니다. 이를 해결하기 위해 모듈 시스템을 사용하여 변수를 모듈화하고 관리할 수 있습니다. 이번 글에서는 자바스크립트 변수의 모듈 처리 방법에 대해 알아보겠습니다.

IIFE (즉시 실행 함수 표현식)

IIFE (Immediately Invoked Function Expression)는 즉시 실행 함수 표현식의 약어입니다. IIFE는 함수를 즉시 호출하면서 함수 스코프 안에서 변수를 선언하고 사용하는 방법입니다. 이를 통해 전역 스코프를 오염시키지 않고 변수를 모듈화할 수 있습니다.

(function() {
  var privateVariable = 'I am a private variable';

  function privateFunction() {
    console.log('I am a private function');
  }

  // 외부로 공개할 변수와 함수 선언
  var publicVariable = 'I am a public variable';

  function publicFunction() {
    console.log('I am a public function');
  }

  // 외부로 공개할 변수와 함수를 반환하는 객체 생성
  return {
    publicVariable: publicVariable,
    publicFunction: publicFunction
  };
})();

IIFE를 사용하면 변수와 함수를 캡슐화하여 외부에서 접근할 수 없도록 만들 수 있습니다. 단, IIFE에서 반환한 객체를 사용하여 내부의 공개된 변수와 함수에 접근할 수 있습니다.

모듈 패턴

자바스크립트 모듈 패턴은 IIFE를 기반으로 하며, 객체 리터럴과 클로저를 이용하여 모듈을 정의하는 방법입니다. 이를 통해 변수와 함수를 모듈화하여 필요한 부분만 공개하고 나머지는 은닉화할 수 있습니다.

var module = (function() {
  var privateVariable = 'I am a private variable';

  function privateFunction() {
    console.log('I am a private function');
  }

  // 외부로 공개할 변수와 함수 선언
  var publicVariable = 'I am a public variable';

  function publicFunction() {
    console.log('I am a public function');
  }

  // 외부로 공개할 변수와 함수를 객체에 할당
  return {
    publicVariable: publicVariable,
    publicFunction: publicFunction
  };
})();

모듈 패턴은 IIFE에서 반환한 객체를 변수에 할당하여 필요한 모듈을 가져올 수 있습니다. 이 방식은 객체 리터럴을 사용하므로 필요한 경우 모듈 내부에서도 메서드를 추가하거나 변경할 수 있습니다.

ES6 모듈

ES6에서는 공식적으로 모듈을 지원합니다. 모듈을 사용하면 파일별로 별도의 스코프를 가지며, 변수와 함수를 import 및 export하여 사용할 수 있습니다.

// module.js

var privateVariable = 'I am a private variable';

function privateFunction() {
  console.log('I am a private function');
}

export var publicVariable = 'I am a public variable';

export function publicFunction() {
  console.log('I am a public function');
}

// main.js

import { publicVariable, publicFunction } from './module.js';

console.log(publicVariable);
publicFunction();

ES6 모듈을 사용하면 모듈 파일에서 필요한 변수와 함수를 export하여 다른 파일에서 import하여 사용할 수 있습니다. 이를 통해 코드의 의존성을 명시적으로 관리하고 모듈 간의 결합도를 낮출 수 있습니다.

결론

자바스크립트 변수의 모듈 처리 방법으로 IIFE, 모듈 패턴, ES6 모듈을 사용할 수 있습니다. 이를 통해 변수를 모듈화하여 코드의 유지보수성을 향상시키고 전역 스코프의 오염을 방지할 수 있습니다. 프로젝트에 적합한 모듈 처리 방법을 선택하여 사용해보세요.