자바스크립트 즉시 실행 함수 표현식(IIFE), 모듈, 네임스페이스 완벽 정리

이 글은 자바스크립트 개발자라면 알아야 할 33가지 개념(33 JavaScript Concepts) 중 즉시 실행 함수 표현식(IIFE), 모듈, 네임스페이스를 정리한 글입니다.

자바스크립트 개발자라면 알아야 할 33가지 개념

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

자바스크립트에서 즉시 실행 함수 표현식(IIFE)은 함수가 정의되는 즉시 실행되는 함수입니다.
일반적으로 전역 스코프를 오염시키지 않기 위해 사용되며, 자체 실행 익명 함수(self-executing anonymous function)로도 알려져 있습니다.

(function () {
  // 일반적인 IIFE
  console.log("즉시 실행됨");
})();

(() => {
  // 화살표 함수 IIFE
  console.log("화살표 함수로 즉시 실행");
})();

(async () => {
  // async-await 구조의 IIFE
  const data = await Promise.resolve("비동기 실행 완료");

  console.log(data);
})();

전역 객체 오염 방지

자바스크립트에서 함수를 선언하거나 var로 변수를 선언하면, 브라우저 환경에서는 window 객체에 자동으로 등록됩니다.

function add(a, b) {
  return a + b;
}

var counter = 10;

console.log(window.add);
console.log(window.counter); // 10

이러한 방식은 전역 변수와 함수의 이름 충돌을 유발하고, 메모리 누수의 원인이 될 수 있습니다.
IIFE를 사용하면 스코프를 지역화하여 이러한 문제를 방지할 수 있습니다.

(function () {
  var privateVar = "이 변수는 외부에서 접근할 수 없습니다.";
})();

반응형

자바스크립트 모듈(JS modules, JavaScript modules)

모듈(Module)은 코드를 논리적으로 분리하여 독립적인 단위로 구성하는 방식입니다. 이를 통해 코드의 재사용성, 가독성, 유지보수성, 의존성 관리를 향상시킵니다.

ES2015(ES6)부터 자바스크립트에서 공식적으로 모듈 시스템 기능이 도입되었습니다.

모듈 스코프(Module Scopre)

모듈은 자체적인 스코프를 가지며, 모듈 내부의 변수나 함수는 기본적으로 외부에서 접근할 수 없습니다.
다른 모듈과 공유하려면 export 키워드로 내보내고, import 키워드로 가져와야 합니다.

export

// foo.mjs
export const repeat = (string) => `${string} ${string}`;
export function shout(string) {
  return `${string.toUpperCase()}!`;
}

import

// bar.mjs
import { repeat, shout } from "./foo.mjs";

repeat("hello"); // hello hello
shout("Modules in action"); // MODULES IN ACTION!

default export

모듈에서는 default 키워드를 사용해 기본값을 내보낼 수 있으며, import 시 원하는 이름으로 가져올 수 있습니다.

// foo.mjs
export default function emphasize(text) {
  return `${text.toUpperCase()}!`;
}

// bar.mjs
import emphasize from "./foo.mjs";

console.log(emphasize("hello")); // HELLO!

모듈의 장점

독립적인 스코프

각 모듈은 자체 스코프를 가지므로, 내부에서 선언한 변수나 함수는 외부에서 직접 접근할 수 없습니다. 이를 통해 모듈 간의 간섭을 방지할 수 있습니다.

전역 스코프 오염 방지

모듈은 전역 객체에 불필요한 속성을 추가하지 않기 때문에, 변수 이름 충돌이나 전역 공간의 오염을 방지할 수 있습니다.

코드 재사용성과 유지보수성 향상

모듈화를 통해 코드를 기능 단위로 나누면, 각 구성 요소를 독립적으로 작성하고 재사용할 수 있으며, 유지보수와 테스트도 훨씬 수월해집니다.

네임스페이스(Namespaces)

자바스크립트에서 네임스페이스는 관련 있는 변수와 함수들을 하나의 객체로 묶어, 전역 범위를 오염시키지 않고 코드 구조를 체계적으로 구성하는 데 사용되는 패턴입니다.
이는 전역 변수의 이름 충돌을 방지하고, 코드 가독성과 유지보수성을 향상하는데 도움을 줍니다.

자바스크립트는 네임스페이스를 위한 내장 문법은 제공하지 않지만, 객체와 프로퍼티를 활용하여 직접 구현할 수 있습니다.

네임스페이스 패턴 예제

var MyApp = MyApp || {};

MyApp.Math = {
  sum: function (a, b) {
    return a + b;
  },
  multiply: function (a, b) {
    return a * b;
  },
};

console.log(MyApp.Math.sum(3, 5)); // 8
console.log(MyApp.Math.multiply(4, 6)); // 24

네임스페이스 패턴의 장점

전역 스코프 오염 방지

하나의 전역 객체(MyApp)만 선언하여, 전역 변수의 개수를 최소화합니다.

관련 코드의 그룹화

기능 단위로 객체를 구성함으로써 코드 구조가 명확해지고, 협업 및 유지보수가 쉬워집니다.

구형 브라우저 호환

ES2015(ES6) 모듈 시스템을 지원하지 않는 환경에서 유용합니다.

ES2015(ES6) 모듈 시스템의 등장 이후로는 대부분 네임스페이스 패턴 대신 import/export를 사용하는 모듈 방식으로 전환되었습니다.

참고

IIFE - MDN
IIFE: Immediately Invoked Function Expressions
JavaScript Immediately Invoked Function Expression
JavaScript modules - MDN
JavaScript modules - v8

👉 이전 글 보기

자바스크립트 개발자라면 알아야 할 33가지 개념 - 7. 표현식 vs 명령문