JS_기술 (2)_ IIFE(즉시 실행 함수 표현)

JS에서 사용하는 IIFE에 대해서 알아보자.

오늘날에는 잘 사용하지 않지만 과거에 사용했던 코드를 분석하기 위해서 알아보자!

 

1. IIFE란?

즉시 실행 함수 표현(Immediately Invoked Function Expression, IIFE)은

정의되자마자 즉시 실행되는 함수를 말한다.

 

구조

(function() {
  ...
}) ();

Self-Executing Anonymous Function 으로 불리는 디자인 패턴이라고 한다.

여기에서는 두 개의 괄호에 주목을 해야한다.

 

먼저, 익명함수를 둘러싼 괄호이다.

이를 통해서 전역 Scope의 불필요한 변수들에 의한 오염 방지와

IIFE 내부 안으로 다른 변수들이 접근하는 것을 방지할 수 있다.

 

그 다음으로는 후미에 위치하는 즉시 실행 함수를 생성하는 괄호이다.

이로인해 JS엔진이 함수를 즉시 해석하여 실행한다.

 

사용처

이전에 let이 아닌 var로 변수를 선언할 때 주로 사용하였고

딱 한 번 만 시행할 함수이고, 그 결과값을 이용하여 초기값으로 활용할 경우에 주로 사용한다.

 

IIFE 내부에 사용한 변수명, 상수명이 외부의 것들과 서로 충돌하는 것을 막을 수 있다.

(오염 방지!)

 

예시)

const initMsg = (function (){
  var month = 3;
  var day = 16;
  var concentrationLv = [20, 34, 60, 65, 40, 42];
  var avgLvTemp = 0;
  for (const i of concentrationLv){
    avgLvTemp += i;
  }
  avgLvTemp /= concentrationLv.length;
  
  return `${month}월 ${day}일의 평균 미세먼지 농도는 ${avgLvTemp}입니다.`;
})();

console.log(initMsg);

>>> 3월 16일의 평균 미세먼지 농도는 43.5입니다.

 

만약 이때 내부에서 선언한 변수와 같은 이름을 외부에서 접근할 경우 오류가 발생한다.

console.log(month); //내부에서 선언한 것이므로 정의하지 않은 것으로 인지

>>> Uncaught ReferenceError: month is not defined

var의 특성 상 let과 다르게 이미 선언한 변수명임에도 불구하고 재선언이 가능했던 것을

위와 같은 방법으로 방지할 수 있다. (다행히 var가 함수Scope는 벗어나지 않았음)

또한 코드의 양이 방대한 경우에도 위와 같은 방법이 충돌 방지에 도움을 준다!

 

 

하지만 오늘날에는 블록문과 let, const 만으로도 간편하게 구현할 수 있다.

let initMsg;
{
  let month = 3;
  let day = 16;
  let concentrationLv = [20, 34, 60, 65, 40, 42];
  let avgLvTemp = 0;
  for (const i of concentrationLv){
    avgLvTemp += i;
  }
  avgLvTemp /= concentrationLv.length;
  
  initMsg = `${month}월 ${day}일의 평균 미세먼지 농도는 ${avgLvTemp}입니다.`;
}

console.log(initMsg);

>>> 3월 16일의 평균 미세먼지 농도는 43.5입니다.