자바스크립트 개발자가 알아야할 33가지 #8 IIFE마스터하기

IIFE

즉시 실행 함수 표현(IIFE, Immediately invoked Function Expression)**은 정의되자마자 즉시 실행되는 Javascript Function을 말한다.

(function () {
	statements
})();

• Self-Executing Anonymous Function으로 알려진 디자인 패턴이다
• 크게 두 부분으로 구성된다.
  1. (() Grouping Operator)로 둘러싸인 익명함수(Anonymous Function)이다.
     1. 전역 스코프에 불필요한 변수를 추가해서 오염시키는것을 방지
     2. private변수처럼 사용할 수 있는 효과
  2. 즉시 실행 함수를 생성하는 괄호 ()이다.

아래 함수는 즉시 실행되는 함수 표현이다. 표현 내부의 외부로부터의 접근이 불가능하다.

(function () {
	let aName = "Barry";
})();
// IIFE 내부에서 정의된 변수는 외부 범위에서 접근이 불가능하다.
aName // throws "Uncaught ReferenceError: aName is not defined"

IFEE를 변수에 할당하면 IIFE 자체는 저장되지 않고 함수가 실행된 결과만 저장된다.

let result = (function () {
	let name = "Barry";
	return name;
})();
// 즉시 결과를 생성한다.
result; // "Barry"

IIFE는 값을 리턴할 수 있을 뿐만 아니라, 호출될 때, 인자를 받을 수도 있다. l

(function (name,age) {
	return console.log(name,age)
}("Barry",25));

1. 위의 예제의 첫 번째 줄에서 , IFEE는 name, age각각 두 개의 파라미터를 갖는다.
2. 우리가 5번째 줄에서 IIFE를 실행할 때, 여태까지 사용했던 빈 괄호 () 대신에 인자 (aguments)를 IIFE로 넘겼다.
3. 2번째 3번째 줄은 이 파라미터를 IIFE내부에서 사용한다.

싱글톤 패턴

싱글톤(singleton) 패턴은 전체 시스템에서 하나의 인스턴스만 존재하도록 보장하는 객체 생성 패턴을 말한다. 객체 리터럴도 싱글톤 패턴이라고 할 수 있다.

let singletonObj = {
    a : '값',
    b : function () {
    }
}

/* Singleton */
/* 싱글톤은 단하나의 인스턴스만 가진다.
*/

let mySingleton = (function () {
    // 인스턴스는 Singleton에 대한 참조를 저장합니다.
    let instance;
    function init() {
      // 싱글톤
      // 프라이빗 메소드와 변수
      function privateMethod(){
          console.log( "I am private" );
      }
      let privateletiable = "Im also private";
      let privateRandomNumber = Math.random();
      return {
        // 퍼블릭메소드와 변수
        publicMethod: function () {
          console.log( "The public can see me!" );
        },
        publicProperty: "I am also public",
        getRandomNumber: function() {
          return privateRandomNumber;
        }
      };
    };
    // 싱글턴 인스턴스(있는 경우)를 가져옵니다(존재하는 경우).
    // 렉시컬 특성으로 인해 비공개 변수, 메서드에 접근 가능하다 (클로저)
    return {
      getInstance: function () {
        if ( !instance ) {
          instance = init();
        }
        return instance;
      }
    };
  })();
  
  let singleA = mySingleton.getInstance();
  let singleB = mySingleton.getInstance();
  singleA.publicMethod(); // The public can see me!
  console.log(singleA.publicProperty);//I am also public
  console.log(singleA.getRandomNumber());//0.8015655605828005
  console.log(singleB.getRandomNumber());//0.8015655605828005
  console.log(singleA === singleB) //true

• 예제 코드에서 비공개 함수 init()의 return 값으로 반환하는 객체가 싱글톤이다.
• 내부 변수에 접근하여 객체를 반환하는 클로저 패턴을 사용했다.
• 객체를 여러 번 생성하더라도 한 개의 객체를 참조하게 된다.
  • singleA와 singleB 두 개의 인스턴스를 생성했지만 getRandomNumber의 반환 값이 같은 값이다. (singleB = singleA에 객체를 가지게 된다 )
• 이러한 싱글톤 패턴을 이용하면 불필요한 메모리 낭비를 줄일 수 있다.

Reference

https://velog.io/@jakeseo_me/자바스크립트-개발자라면-알아야-할-33가지-개념-8-자바스크립트-필수요소-IIFE-마스터하기

자바스크립트 개발자라면 알아야 할 33가지 개념 #8 자바스크립트 필수요소 : IIFE 마스터하기

https://developer.mozilla.org/ko/docs/Glossary/IIFE