본문 바로가기
프론트엔드/JavaScript

즉시 실행 함수

by alswlfl 2023. 1. 6.

즉시 실행 함수, IIFE(Immediately-involked-function): 즉시 실행되는 함수

주로 함수를 선언하자마자 바로 호출을 할 때 사용

 

즉시 실행 함수를 사용이유

const a=1;
function ong(x){
	document.write(x+1);
}
ong(a);
  • ong함수가 호출되면, 문서에 매개변수 x에 1을 더한 값을 씀
  • 함수 표현은 함수를 정의하고, 변수에 함수를 저장하고 실행하는 과정인 반면, 즉시 실행함수는 함수를 정의하고 바로 실행 → 즉, 함수를 생성하고 따로 함수를 호출하는 것이 아니라, 함수를 정의하자마자 바로 함수를 실행하는 방식

1. 초기화 코드 부분에 사용

: 변수를 전역으로 선언하는 것을 피하기 위하여(코드 충돌없이 구현 가능)

ex)

var initText();

(function (number){
	var textList=["is Odd Text", "is Even Text"];
    if (number %2 == 0){
    	initText=textList[1];
    } else {
    	initText=textList[0];
    }
})(5);

console.log(initText);
//is Odd Text
console.log(textList);
//에러 발생

2. 라이브러리 전역 변수 충돌 해결

jQuery나 Prototype 라이브러리는 동일한 $라는 전역 변수 사용 → 두 라이브러리를 같이 사용하면 $변수 충돌 생김

ex)

(function ($){
	//$는 jQuery object
})(jQuery);

 

즉시 실행 함수 사용 방법

const a=1;

//두가지 방식 존재
// 1. (function{})()
(function (){
	document.write(a+1);
})();

// 2. (function{}())
(function (){
	document.write(a+1);
 }());

1. (function (){})()

2. (function (){}())

 

변수에 즉시 실행 함수 저장 가능

(mySquare = function(x){
	console.log(x*x);
})(2);
//4
mySquare(3);
//9

 

⭐️ 즉시 실행 함수를 사용할 때에는 전체 문장에 세미콜론 이용해야함!

 

'프론트엔드 > JavaScript' 카테고리의 다른 글

변수와 상수  (0) 2022.11.18
자바스크립트란?  (0) 2022.11.18