솔미는 성장중

[JS] 즉시 실행 함수 (IIFE) 본문

JavaScript/함수

[JS] 즉시 실행 함수 (IIFE)

solming 2023. 7. 18. 14:28
728x90

즉시 실행 함수 (IIFE)

Immediately-Invoked Function Expression

 

 

별도의 호출 없이 바로 실행되길 바랄 때 사용

주로 변수를 전역으로 선언하는 것을 피하기 위해 사용

 

내부에서 선언한 변수는 외부에서 접근 불가


 

사용 패턴

1번째 방식 (화살표 함수)

(F) ( )

  (() => {})()

2번째 방식 (일반 함수)

(F) ( )

(function() {})()

3번째 방식

(F( ) )

((function() {})())

4번째 방식

! F ( )

!function() {}()

5번째 방식

+ F ( )

+function() {}()

 

const a = 5

const double = () => {
  console.log(a*2)
}

(() => {console.log(a*2)})();            //1번째 방식
(function() {console.log(a*2)})();    //2번째 방식
((function() {console.log(a*2)})());  //3번째 방식
!function() {console.log(a*2)}();     //4번째 방식
+function() {console.log(a*2)}()     //5번째 방식

예시

const a = 5;

const double = () => {
  console.log (a*2)
}

double(); //10   기존에 호출하던 방식

//(함수 내용)()
(() => {
  console.log (a*2)
})()   //10      즉시 실행 함수
(function(a,b)){
  return console.log(a-b);
})(1,2);

 

그럼 뒤쪽 괄호에는 뭐가 들어가는 거죠?
  • (함수내용) (즉시 실행함수의 매개변수에 들어갈 인자) 형태로 사용 가능하다.
  • 난독화 할때 사용 (하단 예시)
(a,b) => {
  console.log(a.innerWidth)
  console.log(b.body)
}(window, document)

 

728x90