2018-08-05 JavsScript-IIFE / Module Pattern

IIFE / Module Pattern에 대해서, 알아보자

IIFE : 즉시실행함수

• Immediately-Invoked Function Expression : 즉시실행함수
• JS에서는 함수 선언 / 익명 함수 표현식 / 기명 함수 표현식 과 같은 방법을 이용해, 함수를 정의한다. 이 중에서 함수표현식(Function Expression)은 함수를 정의하고 변수에 함수를 저장하고 실행하는 과정을 거친다. 하지만, 즉시실행함수는 함수를 정의함과 동시에 실행하는 함수이다.

()()  -> 이렇게 소괄호를 2번 사용하면 된다.

(function(name) {
  console.log('This is IIFE function -> ' + name);
})('foo');


위와 같이 만든, 즉시실행함수의 경우 같은 함수를 다시 호출 할 수 없다.
이러한 특징을 이용하여, 최초 1번만 실행해야하는 초기화 코드에 사용이 가능하다.

그리고 변수에 추가 하지 않아도 되기에 코드 충돌을 방지할 수 있고,
외부 접근을 통제할 수 있도록 하기위해 즉시실행함수를 이용

Module Pattern

• 패턴? -> 디자인 패턴 = 디자인 패턴은 “일반적인 설계 문제를 특정한 맥락(context)으로 해결하기 위해 객체와 클래스를 전달하는 방법을 맞춘 것”입니다.
• 결론적으로, 디자인 패턴은 애플리케이션 설계 문제의 해법 / 고질적인 문제를 재사용 가능하게 완화시켜주는 해결책
• JS에서도 디자인 패턴이 존재하며, 오늘은 Module Pattern에 대해서 알아보자.

- 모듈(module) 이라는 것은 전체 애플리케이션의 일부를 독립된 코드로 분리해서 만들어 놓은 것

- JavaScript에서의 모듈은 특정 구성요소를 다른 구성요소와 독립적으로 유지하는데 가장 널리 사용되는 디자인 패턴입니다. 이는 잘 구조화된 코드를 지원하기 위해 느슨한 결합을 제공합니다.

- 모듈 패턴은 public 및 private 접근 권한 설정을 가능하게 합니다.

- 모듈은 변수와 메서드를 보호하는 클로저(하지만 함수 대신 객체를 반환해야 합니다) 처럼 private 범위를 허용하는 IIFE (Immediately-Invoked-Function-Expressions)이어야합니다.

const testModule = (function(){
  //private
  let test = 'test';
  let testFunction = function(){

  }


  //public
  return {
    callModule : function(){

    },
    callPrivateFunction : function() {
      testFunction();
    }
  }

  })();

- 장점 : 코드를 모듈별로 분리 할 때, 좋으며 책임이 분리 됩니다.
- 단점 : 모듈로 분리하면서, 코드 구조 잡는데 많은 시간을 투자. / 해당 패턴을 제대로 이해하려면 closer를 이해해야함.