[디자인 패턴]즉시 함수 호출 표현식(IIFE)을 사용한 싱글턴 패턴

1. 즉시 함수 호출 표현식(IIFE)

익명함수와 즉시 함수 호출 표현식(IIFE)을 이해하고 넘어가는 것이 좋다. 먼저 간략하게 설명한 정의는 다음과 같다.

익명함수란 사용자가 자바스크립트에서 정의할 수 있는 함수 중 익명, 즉 이름이 없는 함수이다. 즉시 함수 호출 표현식(IIFE)은 함수를 선언과 동시 호출하는 표현식을 의미한다.

 

익명함수를 설명하기 위해선 즉시 함수 호출 표현식이 항상 따라온다. 기존 함수들은 이름이 존재하기 때문에 선언과 호출이 따로 이루어지지만, 익명함수는 이름이 없기 때문에 한 번 정의하고 난 후에, 나중에 호출할 수 방법이 없다. 그래서 즉시 함수 호출 표현식(IIFE)를 통해서 선언과 동시에 호출하여 사용한다.

 

즉시 함수 호출 표현식(IIFE)은 (function(){})();의 구조를 띈다. 함수를 괄호로 감싸고, 끝의 ()를 통해 호출하는 구조이다.

 

예시를 들자면, (var name = function(){})();의 경우에도 즉시 함수 호출 표현식(IIFE)이지만, name이라는 변수가 함수를 참조하고 있기 때문에, 익명함수는 아니다.

---

2. 디자인 패턴

2.1 싱글턴 패턴

 

하나의 생성자 함수로 다양한 인스턴스를 만들 수 있다. 하지만 하나의 생성자 함수로 하나의 인스턴스만 만들고 싶으면 어떡해야할까?

 

그럴 때 사용하는 것이 디자인 패턴 중 하나인 싱글턴(singleton)이다.

var singleton = (function() {
    var instance;
    var a = function(){
    	alert("singleton");
        }
    // 비공개 함수인 a
    
    function initiate(){
    	return {
          a : a,
          b : function(){
          alert("function of instance");
          }
       }
    }
    // a, b 인스턴스를 만들어주는 함수
    
    return {
      getInstance:function(){
          if(!instance){
              instance = initiate();
          }
          return instance;
      }
    }
})();

var first = singleton.getInstance();
var second = singleton.getInstance();
console.log(first === second) // true;

즉시 함수 호출 표현식(IIFE)를 사용하여 비공개 변수와 비공개 함수를 갖도록 한다. 이후 singleton.getInstance()를 실행시키면 instance를 가지게 된다. 이후에는 instance가 이미 존재하기 때문에 똑같은 instance를 가지게 된다. 

 

대충 틀을 짜보면 다음과 같다.

즉시 함수 호출 표현식(IIFE) {
    비공개 변수 인스턴스 & 비공개로 설정하고 싶은 함수 및 변수;
    인스턴스를 설정해주는 함수(initiate);

    return을 통해 인스턴스를 갖게 해주는 함수(getInstance)를 가진 객체 반환
}

싱글턴 패턴의 경우 처음 네임스페이스를 만들 때 주로 사용한다. 아래는 제로초(Zerocho)님의 글을 인용한 내용이다.

예를 들어 게임을 만든다고 치면, 게임 객체를 싱글턴으로 만드는 겁니다. 게임 내의 모든 것을 감싸고 있는 객체를 말이죠. 게임을 실행했을 때 게임은 한 번만 켜져야하기 때문에 싱글턴이 적절합니다.

 

Reference

https://www.zerocho.com/category/JavaScript/post/57541bef7dfff917002c4e86

(JavaScript) 디자인 패턴(싱글턴, 모듈, 생성자)