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

즉시실행 함수 표현식

일반적으로 함수는 선언 후에 실행하도록 되어있다.

function a() {
	console.log("a");
}
a();

즉시실행 함수 표현식은 함수의 선언과 동시에 실행하도록 하는 표현식이다.

(function a() {
	alert("a");
})();

이 표현식의 등장은 이전 포스트에서 다룬 'var'로 선언한 변수와 관련이 있다.

'var'는 블록 스코프가 아니기 때문에, var를 블록 스코프를 가질 수 있도록 방법을 고안하다가 IIFE가 등장했다.

2021/01/11 - [FrontEnd/Java Script] - 호이스팅이란?

 

즉시실행함수는 선언할때 괄호로 감싸서 (function a(){...})와 같은 형태로 만든다.

자바스크립트에서는 function 이라는 키워드를 만나게 되면, 함수선언문이 나올 것으로 예상하는데,

함수선언문은 반드시 함수의 이름이 있어햐한다.

 

// 함수를 선언과 동시에 실행하려고 함
function() { // <-- Error: Function statements require a function name

  let message = "Hello";

  alert(message); // Hello

}();

위 코드는 함수에 이름이 없기 때문에 에러가 발생한다.

 

이름을 넣는다면 달라질까?

아쉽게도 다른 에러가 발생할 뿐, 에러가 발생하는 것은 마찬가지이다.

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

  let message = "Hello";

  alert(message); // Hello

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

자바스크립트는 함수 성언문으로 정의한 함수를 정의와 동시에 바로 호출하는 것을 허용하지 않는다.

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

 

자바스크립트가 함수선언문을 함수표현식으로 인식하도록 하는 방법은 여러가지가 있다.

// IIFE를 만드는 방법

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

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

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

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

위와 같이 작성하면, 함수 즉시 실행할 수 있다.

다만, 모던 자바스크립트에서는 블록스코프가 잡혀있기 때문에 이렇게 코드를 작성할 필요가 없다.

 

※출처 https://ko.javascript.info/var