WEB/JavaScript

[JavaScript] 즉시 실행 함수 표현(IIFE) 알아보기.

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

저작자표시 비영리

'WEB > JavaScript' 카테고리의 다른 글

[JavaScript] contenteditable 붙여넣기 텍스트만 넣기 (0)	2023.09.14
[JavaScript] 선택된 라디오 버튼만 checked로만들기 (0)	2023.09.07
[JavaScript] 자바스크립트를 . . . 로딩 함수 만들기 (0)	2023.06.29
[JavaScript] 자바스크립트 disabled 제어 방법(조회/추가/삭제) (0)	2023.06.28
[JavaScript] 자식창의 정보를 부모창에 전달하는 방법 (0)	2023.06.21

Contents

새소식

인기 검색어