IIFE(즉시실행 함수)

자바스크립트를 사용하면서 꼭 알아두어야 하는 개념중 하나인 IIFE 에 대해서 정리를 하겠습니다. 

IIFE 란 정의되자마자 실행되는 자바스크립트 함수입니다. 

 

IIFE 함수 표현식은 함수 리터럴 () 로 감싼뒤 function을 익명으로 사용합니다. 

아래 예제 코드입니다. 

 

(function () { console.log('Hello World') })(); // Hello World

이부분을 크롬 브라우저 콘솔이나 js 파일로 작성한뒤 node 로 실행하면 따로 함수를 호출하지 않아도 바로 실행이 됩니다. 

 

여기서 자바스크립트에서 함수 리터럴 (Function Itertor) 은 네가지 요소로 되어 있습니다. 

 

1. function 예약어 (필수)
2. 함수명 (선택)
3. 매개변수 집합 (필수)
4. 함수 스코프 (필수)

여기서 함수명은 선택이지만 아래와 같이 작성하면 에러가 출력이 됩니다. 

function (a, b) { return a + b } // Uncaught SyntaxError: Unexpected token 

 

함수명을 생략할수 있는 조건은 아래 두가지 조건이 있습니다. 

 

1. 함수를 할당받은 변수를 지정한 경우 

const add = function (a, b) { return a + b } 

2. 즉시실행함수(IIFE) 를 사용하는경우 

(function (a, b) { return a + b })()

IIFE 는 자바스크립트에서 코드를 실행할때 function () {} 은 함수 선언문으로 인지를 합니다. 여기서 함수는 실행만 하고 메모리에서 공간에서 사라지기 때문에 변수로 할당받지 않는 이상 값으로 남아있지 않습니다. 따라서 () 와 같이 감싼뒤에 매개변수를 받을 집합을 선언해주는 이유입니다. 

(function(a, b) { return a + b })(1, 2) // 3

 

 

참고 URL velog.io/@doondoony/javascript-iife