ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 자바스크립트 Chapter 8 IIFE, Modules and Namespaces
    Computer Science/JavaScript 2019.04.28 03:01

    자바스크립트 핵심 컨셉 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 singleton = function() {
      // Inner logic
      function sayHello(){
        console.log('Hello');
      }
      // Expose API
      return {
        sayHello: sayHello
      }
    }()
    
    singleton.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