[javascript] 즉시실행함수표현 (IIFE) 을 활용한 공통 js 모듈 만들기

즉시실행함수표현 (IIFE)

• Immediately Invoked Function Expression
• 정의되자마자 바로 실행되는 함수

IIFE 샘플 소스

var calculator = (function() {
  function sum(a, b) {
  	return a + b; 
  }
  
  calculator.sum = sum;
})();

console.log(calculator.sum(2, 4)); // 6

IIFE 사용하는 이유?

• 전역 scope 오염(변경) 방지
• 즉시실행함수표현 내 선언된 변수는 지역변수 -> 외부 접근 및 변경 불가
• 공통 js 모듈 내 전역변수를 사용하는 것은 불안정 -> 덮어쓰기 가능하기 때문

let globalVar;

(function() {
  const localVar = "local scope";
  globalVar = "global scope";
})();

console.log(`globalVar : ${globalVar}`);	// global scope
console.log(`localVar : ${localVar}`);		// Uncaught ReferenceError: localVar is not defined

공통 js 모듈 샘플 소스

let SaladUtils = SaladUtils || {};

SaladUtils = (function () {
  // 샐러드구분코드 상수 선언
  const SALAD_DS_CD = {
    CHICKEN: "0001",
    PORK: "0002",
    BEAN: "0003",
    CHEESE: "0004",
  };

  return {
    /**
     * 샐러드 상품 유틸리티 js
     */
    product: {
      /**
       * 샐러드구분코드반환
       * @param {string} saladDsStr 샐러드구분문자열
       */
      getSaladDsCd: function (saladDsStr) {
        return SALAD_DS_CD[saladDsStr];
      },
    },
  };
})();

const SaladPdUtils = SaladUtils.product;

console.log(SaladPdUtils.getSaladDsCd("CHICKEN"));	// 0001
console.log(SaladPdUtils.getSaladDsCd("PORK"));		// 0002
console.log(SaladPdUtils.getSaladDsCd("BEAN"));		// 0003
console.log(SaladPdUtils.getSaladDsCd("CHEESE"));	// 0004
console.log(SaladPdUtils.getSaladDsCd("NULL"));		// undefined

결론

• 공통 관리가 필요한 상수나 2번 이상 호출될 가능성이 있는 함수는 공통 모듈로 관리하자! 🎯