즉시 실행 함수 (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로 인식되나봄???)
참고 ↓↓↓↓
ES6 immediately invoked arrow function
Why does this work in a Node.js console (tested in 4.1.1 and 5.3.0) but doesn't work in the browser (tested in Chrome)? This code block should create and invoke an anonymous function that logs Ok. ...
stackoverflow.com
위와 같은 이유로 ( ) 없이 사용하는 ! 연산자또한 즉시실행 함수 표현식에서 문법오류가 발생한다.
((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
'~2022 > 아티클' 카테고리의 다른 글
| 클린코드 - 02. 의미 있는 이름 (0) | 2021.11.15 |
|---|---|
| 클린코드 - 01. 깨끗한 코드 (0) | 2021.11.14 |
| [아티클 프로젝트 060] 콜 스택(Call stack)과 힙(Heap) (0) | 2020.11.05 |
| [아티클 프로젝트 059] 모듈 시스템: CommonJS, AMD, UMD, ES6 (0) | 2020.11.04 |
| [아티클 프로젝트 057] 취준생이 반드시 알아야 할 프론트엔드 지식들 (var va let va const) (0) | 2020.11.02 |
| [아티클 프로젝트 055] this (0) | 2020.10.28 |
| [아티클 프로젝트 051] User-Agent Client Hints의 도입, UA 프리징을 대비하라 (0) | 2020.10.14 |
| [아티클 프로젝트 049] Chrome is deploying HTTP/3 and IETF QUIC (0) | 2020.10.08 |