[JavaScript 33가지 개념] 08. IIFE, Modules, Namespaces

 

IIFE, Modules, Namespaces는 자바스크립트에서 코드 구조화를 위해 사용되는 중요한 개념이다. 

각각의 개념은 서로 다른 방식으로 코드의 구조화와 유지보수를 용이하게 하는데 도움을 준다.

 

1. IIFE

IIFE (Immediately Invoked Function Expression) IIFE는 즉시 실행되는 함수 표현식으로, 함수를 정의하고 즉시 호출하는 것을 의미한다. 
이를 통해 전역 스코프를 오염시키지 않고 모듈화할 수 있으며, 클로저를 이용하여 비공개 변수를 만들어 정보 은닉에도 사용된다. 

사용 방법은 아래와 같다.

(function() {
  // 함수 내 코드
})();

 

2. Modules

Modules는 자바스크립트 코드를 여러 파일로 분리하여 개발하고 유지보수하는 방법이다.
각각의 모듈은 다른 모듈과 독립적으로 존재하며, 필요한 모듈을 가져와서 사용할 수 있다.
모듈은 보통 단일 책임 원칙(SRP)을 따르며, 다른 모듈에서 접근할 수 있는 공개 인터페이스를 정의한다.

 

ES6 이후부터는 자바스크립트에 기본적으로 모듈 기능이 포함되어 있어서, import와 export 키워드를 사용하여 모듈을 정의하고 불러올 수 있다.
사용 방법은 아래와 같다.

// 모듈 내보내기
export const functionName = () => {
  // 함수 내 코드
}

// 모듈 가져오기
import { functionName } from './moduleName.js';

 

3. Namespaces

Namespaces는 이름 충돌을 방지하기 위해 관련된 변수와 함수를 그룹화하는 방법이다. 

Namespaces는 객체를 이용하여 구현하며, 객체의 프로퍼티로 함수와 변수를 추가하여 사용한다.

 

이를 통해 전역 스코프에서의 충돌을 방지하고, 코드의 가독성과 유지보수성을 높일 수 있다.

사용 방법은 아래와 같다.

// 네임스페이스 생성
const myNamespace = {
  functionName: () => {
    // 함수 내 코드
  },
  variableName: 'value'
};

// 네임스페이스 사용
myNamespace.functionName();
console.log(myNamespace.variableName);

 

 

참고 자료

- https://vvkchandra.medium.com/essential-javascript-mastering-immediately-invoked-function-expressions-67791338ddc6

Essential JavaScript: Mastering Immediately-invoked Function Expressions

- https://blog.cloud66.com/an-overview-of-es6-modules-in-javascript

An overview of ES6 Modules in JavaScript