2023-07-29
1. 정의
즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)은 정의되자마자 즉시 실행되는 Javascript Function 를 말한다.
이는 Self-Executing Anonymous Function 으로 알려진 디자인 패턴이고 크게 두 부분으로 구성된다. 첫 번째는 괄호((), Grouping Operator)로 둘러싸인 익명함수(Anonymous Function)이다. 이는 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지할 수 있을 뿐 아니라 IIFE 내부안으로 다른 변수들이 접근하는 것을 막을 수 있는 방법이다.
두 번째 부분은 즉시 실행 함수를 생성하는 괄호()이다. 이를 통해 자바스크립트 엔진은 함수를 즉시 해석해서 실행한다.
2. 예제
실제 아래와 같이 코드를 작성하면 최초 해당 페이지 랜딩 시에 console.log가 실행된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
(function (){
console.log("IIFE CALL")
})()
</script>
</html>아래와 같이 매개변수를 대입해서 적용할 수 도 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
(function (a,b){
console.log(a + b); //3
})(1,2)
</script>
</html>3. 특징
IIFE 에서 정의된 변수는 외부로부터의 접근이 불가능하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
(function (){
console.log("IIFE CALL");
var data = 1; //해당 스코프에서만 접근 가능
})()
console.log(data) // Uncaught ReferenceError: data is not defined . . . .
</script>
</html>4. 출처
https://developer.mozilla.org/ko/docs/Glossary/IIFE
IIFE - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN
즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)은 정의되자마자 즉시 실행되는 Javascript Function 를 말한다.
developer.mozilla.org
메인 이미지 출처 : 사진: Unsplash의Gabriel Ramos