[아티클 프로젝트 058] 즉시 실행 함수 (IIFE, Immediately-Invoked Function Expression)

 

즉시 실행 함수 (IIFE, Immediately-Invoked Function Expression)

• 즉시 실행하여야하지만 전역 스코프(Global Scope)를 오염시키지 않으려고 할때 사용한다.
• 함수 리터럴을 ( )로 감싼 뒤 바로 실행하는 형태가 일반적이며 기명도 가능하고 익명도 가능하다.
• ( )로 감싸주는 이유는 자바스크립트는 function(){ } 키워드를 사용할 경우 파서가 선언문으로 인지한다.
• 선언문은 해석기에서 실행 후 사라지기에 값으로 존재하지 않는다. 때문에 "함수 표현식"을 통해 명시적으로 나타내줘야한다.
• ( )를 붙이는 것 외에도 연산자를 앞에 붙일 경우에도 즉시 실행된다.

-function(a, b){ return console.log(a + b) })(1,2) // 3
// 즉시 실행됨

하지만 보통 ( )로 묶는 표현 방법을 사용한다.

(function(a, b){ return console.log(a + b) })(1,2) // 3
// 즉시 실행됨

;(function(a, b){ return console.log(a + b) })(1,2) // 3
// 즉시 실행되며 앞에 값과 이어진 값으로 평가받는것을 방지할 때 세미콜론을 사용한다.

 

함수 선언문이 아닌 함수 표현식으로 작성해야한다.

const hello = function(){} // (X)

(function(){
    // ..
})(); // (O)

(function(){
    // ..
}()); // (O)

 

단순히 위의 예시는 코드 스타일의 차이이나 화살표함수일 경우 아래 예시처럼 첫번째 방법만 사용이 가능하다.

(() => {
    // ..
})(); // (O)

(() => {
    // ..
}()); // (X)

 

아래와 같이 호출하는 경우 함수 호출을 하기 위한 호출대상이 명세에서 말하는 Member Expression 이어야하나 화살표함수는 Assignment Expression 이기때문에 불가능하다고 한다. 

(화살표 함수의 => 화살표는 연산자가 아닌 것으로 취급되며 화살표 함수 자체의 파싱이 특별하게 취급되기 때문이라고 하는데,  Assignment Expression로 인식되나봄???)

 

참고 ↓↓↓↓

https://stackoverflow.com/questions/34589488/es6-immediately-invoked-arrow-function/34589765#34589765

ES6 immediately invoked arrow function

 

위와 같은 이유로 ( ) 없이 사용하는 ! 연산자또한 즉시실행 함수 표현식에서 문법오류가 발생한다.

((a, b) => a + b)(1, 2); // 3
!(a, b) => a + b)(1, 2); // Uncaught SyntaxError

 

---

 

출처 및 참고

IIFE (Immediately-Invoked Function Expression)

https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/iife.md

 

자바스크립트의 IIFE

https://velog.io/@doondoony/javascript-iife