[js] 즉시 실행 함수 표현 식(IIFE)

IIFE(immediately-invoked function expressions)

javascript에서는 과거에 var만 사용할 수 있었다.

그런데 var의 스코프는 블록 레벨 수준이 아니기 때문에 생긴 '즉시 실행 함수 표현 식(immediately-invoked function expressions)'이 있다.

즉시 실행 함수 표현 식은 IIFE라고 부른다.

즉시 실행 함수 표현 식을 요즘에는 자주 쓰지 않는다.

하지만 레거시 코드에서 만날 수 있기 때문에 즉시 실행 함수 표현 식이 무엇인지 알아 둘 필요가 있다.

 

IIFE는 다음과 같이 생겼다.

 

(function() {

  let sayHello = "Hello";

  alert(sayHello); // 출력값: Hello

})();

 

함수 표현 식이 만들어지고 바로 호출되면서, 해당 함수가 바로 실행된다.

그로 인해 이 함수는 자신만의 변수를 가지고 있다.

즉시 실행 함수를 만들 땐, 함수 표현 식을 괄호로 둘러쌓아 (function {…})와 같은 형태로 만든다.

이렇게 괄호로 둘러싸지 않으면 에러가 발생한다.

자바스크립트는 'function’이라는 키워드를 만나면 함수 선언문이 시작될 것이라 예상한다.

 

그런데 함수 선언문으로 함수를 만들 땐 반드시 함수의 이름이 하고 따라서 아래와 예시를 실행하면 에러가 발생한다.

// 함수를 선언과 동시에 실행하려고 함
function() {

  let sayHello = "Hello";

  alert(sayHello); // 출력값: Error: Function statements require a function name

}();

함수의 이름을 넣어도 에러가 발생, 자바스크립트는 함수 선언문으로 정의한 함수를 정의와 동시에 바로 호출하는 것을 허용하지 않기 때문이다.

 

// 맨 아래의 괄호 때문에 문법 에러가 발생
function immediatelyFunction() {

}(); // <-- 함수 선언문은 선언 즉시 호출할 수 없다.

함수를 괄호로 감싸면 자바스크립트가 함수를 함수 선언문이 아닌 표현 식으로 인식하도록 속일 수 있다.

함수 표현 식은 이름이 없어도 괜찮고, 즉시 호출도 가능하다.

 

괄호를 사용하는 방법 말고도, 자바스크립트가 함수 표현 식이라고 인식하게 해주는 다른 방법들이다.

// IIFE를 만드는 방법

(function() {
  alert("함수밖에 괄호로 둘러싸기");
})();

(function() {
  alert("전체를 괄호로 둘러싸기");
}());

!function() {
  alert("표현 식 앞에 비트 NOT 연산자(!) 붙이기");
}();

+function() {
  alert("표현 식 앞에 단항 덧셈(+) 연산자 붙이기");
}();

위와 같은 방법을 사용하면 함수 표현 식처럼 인식되어 바로 실행이 가능

그런데 모던 자바스크립트에선 IIFE를 좀처럼 사용하지 않기 때문에 이렇게 코드를 작성할 필요가 없다.