IFFE와 모듈

 

오늘은 IIFE와 모듈에 대해 정리해보겠습니다.

 

IIFE (즉시 실행 함수)

(function () {
	// 코드
	}
)()

위와 같은 형태를 취하는 것이 IIFE인데요. 저는 봤을 때 자바의 익명 객체와 비슷한 건가라고 생각했습니다.

자바의 익명 객체는 재사용성이 없는 객체를 1회용으로 쓰기 위해 사용되는 데, 자바스크립트의 IIFE도 그런 면으로 보면 비슷한 것 같습니다.

 

// 기명 즉시 실행 함수
(function foo() {
  // code ...
}());

// 익명 즉시 실행 함수
(function () {
  // code ...
}());

자바스크립트의 IIFE는 이름을 가질 수도 있고, 이름 없는 함수로도 정의해서 사용할 수 있습니다.

소괄호 내부에 함수를 작성해야 하며 함수 블록을 닫는 중괄호 바로 뒤에 함수를 호출하도록 소괄호를 붙여야 합니다.

 

IIFE는 함수의 정의와 동시에 실행되는 함수이며 단 한번만 호출되고 재사용할 수 없습니다.

최초 한번만 실행이 필요한 초기화 처리 작업 등에 사용되며 전역 스코프를 해치지 않는다는 장점이 있습니다.

전역 스코프의 변수, 함수 등 식별자는 어디서든 접근, 호출이 가능하며 이로 인한 사이드 이펙트를 개발자가 모두 케어하는 일은 쉽지 않은데 IIFE를 사용하면 혹시나 발생할 수 있는 동일한 변수명, 함수 명의 충돌을 방지할 수 있습니다.

 

모듈

모듈은 프로그래밍 언어 관점으로 코드를 수행하는 개별 단위라고 할 수 있습니다. 모듈을 기능별로 분리해서 작성하여 애플리케이션을 구성하도록 하면 재사용성, 효율성, 유지보수 등을 높일 수 있습니다.

 

Node.js는 이러한 모듈화를 지원하는 기능으로 CommonJS를 사용하고 있으며 자바스크립트 ES6로 넘어와서는 import, export 기능을 제공하고 있습니다.

 

자바스크립트는 기본적으로 브라우저에서 실행되며 ES6의 모듈 기능을 사용하지 않으면 전역 스코프를 공유합니다.

따라서 a.js에서 선언한 변수를 b.js에서도 중복 선언할 수도 있고 충돌하는 일이 발생할 수 있습니다.

 

ES6 모듈은 독립된 모듈 스코프를 가지고 있으며 위와 같은 문제를 방지할 수 있게 됩니다.

 

// export

const foo = 10;

const sum = () =>  a + b;

class Person {
  constructor(name) {
    this.name = name;
  }
}

export { foo, sum, Person };

// export default () => {}
// export default App;

export는 선언한 변수, 함수, 클래스 등을 외부에서 사용할 수 있도록 내보내는 기능을 하는 키워드입니다.

const, let 키워드 앞에 export를 붙여 하나씩 내보낼 수 있고, 하나의 객체로 모아서 내보낼 수도 있습니다.

default 키워드는 모듈에서 하나만을 export 할 때 사용할 수 있습니다.

 

// import
import { foo, sum, Person } from 'a.js';
import App from 'app.js'; // export default

console.log(foo);
console.log(sum(1, 2));
console.log(new Person('Sian'));

import는 모듈에서 export한 대상들을 불러올 때 사용하는 키워드입니다.

위와 같이 하나씩 export 된 대상들을 객체로 불러올 수 있고, export default로 내보내진 기능은 임의의 이름으로 import 할 수 있습니다.

 

정리

IIFE는 즉시 실행 함수로 전역 스코프를 오염시키지 않고 1회용 작업이 필요할 때 사용합니다.

모듈은 각각의 기능을 분리해서 선언한 코드들을 다른 모듈에서 사용할 수 있도록 하는 기능이며 import, export 키워드로 해당 기능을 사용할 수 있습니다.

 

참고
모던 자바스크립트 딥 다이브