본문 바로가기
Computer Science/JavaScript

자바스크립트 Chapter 8 IIFE, Modules and Namespaces

by Write and Remember 2019. 4. 28.

자바스크립트 핵심 컨셉 33가지

 

Chapter 8 IIFE, Modules and Namespaces

 

1. IIFE(Immediately Invoked Function Expression)

 

한국어로 번역하면 즉시 실행 함수 표현이다.

 

Self-Executing Anonymous Function

 

(자기 호출 익명 함수)으로 알려진 패턴이다.

 

이 패턴의 핵심은 함수를 사용하여

 

표현식으로 바꾸고 즉시 실행하는 것이다.

 

코드를 살펴보면,

 

(function () {
	const name = "example";
})();
name; // name is not defined IIFE 내부에서 정의된 변수는 외부 범위에서 접근이 불가능함

 

괄호로 둘러 싸인 익명 함수는 IIFE 내부의

 

변수에 접근하지 못하도록 막을 수 있는 방법이다.

 

즉시 실행 함수를 생성하는 마지막 괄호는

 

자바스크립트 엔진이 함수를 즉시 해석해서 실행한다.

 

const result = (function() {
    const name = "example";
    return name;
})();
// 즉시 결과를 생성
result; // "example"

 

위의 예제는

 

IIFE를 변수에 할당하면 즉시 실행된 결과만 저장이 된다.

 

2. Modules

 

모듈이란?

 

패턴이다.

 

세부 사항 구현을 캡슐화하고

 

다른 코드에서 쉽게 불러오고 사용할 수 있도록 하는

 

재사용 가능한 코드 조각이다.

 

1번에서 살펴본 IIFE도 모듈 패턴 중 하나이다.

 

모듈 패턴 중 Revealing Module(노출식 모듈)도 살펴보자.

 

const revealingModule = function() {
  // Inner logic
  function sayHello(){
    console.log('Hello');
  }
  // Expose API
  return {
    sayHello: sayHello
  }
}()

revealingModule.sayHello(); // Hello

 

괄호로 둘러싸지 않았고 변수를 통해

 

모듈의 API를 통해 접근할 수 있다.

 

또한 생성자 함수를 노출할 수 있다.

 

const Module = function() {
  // Inner logic
  function sayHello(){
    console.log('Hello')
  }
  // Expose API
  return {
    sayHello: sayHello
  }
}

const module = new Module()

module.sayHello() // Hello

 

Module 생성자 함수를 사용하여

 

module을 인스턴스화(객체화) 하였음

 

위에서 살펴본 모듈을 정의하기 위해

 

사용하는 문법을 Module formats라고 한다.

 

대표적인 Module formats :

 

Asynchronous Module Definition(AMD)

 

CommonJS

 

Universal Module Definition(UMD)

 

System.register

 

ES6 module format

 

Module loaders

 

위와 같은 Module formats으로 작성된 모듈을

 

해석하고 로드한다. (런타임에 실행됨)

 

인기 있는 모듈 로더

 

RequireJS

(AMD을 위한 loader)

 

SystemJS

(AMD, CommonJS, UMD, System.register을 위한 loader)

 

Module bundlers는

 

모듈 로더를 대체한다.

 

모듈 로더와 반대로 빌드 타임에 실행된다.

 

인기 있는 모듈 번들

 

Browserify(CommonJS 모듈을 위한 번들러)

 

Webpack(AMD, CommonJS, ES6 모듈을 위한 번들러)

 

3. Namespaces

 

네임스페이스 패턴은 전역 객체를 하나만 만들고

 

모든 기능을 만든 전역 객체에 추가하는 패턴이다.

 

전역 유효 범위에

 

수많은 함수, 객체, 변수들로 어지럽히지 않기 위해서 사용한다.

댓글0