본문 바로가기
웹 프론트/HTML | CSS | JS

자바스크립트 - IIFE 란? (Immediately Invoked Function Expressions)

by 번데기 개발자 2018. 7. 26.
반응형

IIFE란 


IIFE는 Immediately Invoked Function Expressions의 약자이고 “Iffy”라고 발음합니다.

즉 즉시 호출 함수 표현식의 줄임말입니다.


즉시 실행 함수의 기본적인 형태는 다음과 같습니다.







함수의 선언과 표현



IIFE를 이해하기 위해서는 앞전에 설명했던 함수의 선언(Function Declaration)과 함수의 표현(Function Expression)의 차이점에 대해 이해해야 합니다.

많은 사람들은 단순히 표현식에서는 함수명이 생량될 수 있다고 알고 있지만 사실 이보다 좀  더 뚜렷한 차이점을 가지고 있습니다.


함수 선언(declartion)은 미리 자바 스크립트의 실행 컨텍스트(execution context)에 로딩되어 있으므로 언제든지 호출 할 수 있지만, 표현식(Expression)은 인터프리터가 해당 라인에 도달하였을때만 실행이 됩니다.


즉 함수 선언(declaration)을 조건(conditionally)에 따라 할당(assignment)하거나, 생성, 또는 괄호 연산자로 그루핑(grouping)하여 표현식으로 나타낼 수 있습니다.

다음 소스는 함수 정의(선언 및 표현)의 차이를 간단히 보여주고 있습니다.






즉시 호출 함수 표현식의 동작 방법


괄호쌍이 익명의 함수를 감싸서 함수 선언(declaration)을 함수 표현식(expression)으로 표현 할 수 있습니다.

그러므로, 단순한 익명의 함수를  global 스코프에 선언하지 않고 어디서든 익명의 함수 표현식을 가질 수 있습니다.

따라서 아래와 같은 표현식이 가능합니다.





이와 유사하게 이름을 부여하고, 즉시 호출된 함수 표현식으로 생성할 수도 있습니다.





showName 함수는 선언과 동시에 실행이 되며, 이름이 있으므로 나중에 호출 할 수도 있습니다.

하지만 익명의 표현식은 나중에 다시 호출할 수 없습니다. 왜냐하면 참조할 방법이 없기 때문입니다.

익명의 함수를 괄호안에(group context)에 취치시킬 경우, 전체 그룸을 평가(evaluate)하고 값을 리턴합니다. 결국 리턴값은 익명함수 자신입니다.

마지막 두개의 괄호는 JS컴파일러에게 이 익명함수를 바로 호출하라고 말합니다. 이것을 IIFE라고 부릅니다.




IIFE를 언제 사용하는지?



IIFE는 주로 전역 영역(Global Scope)를 오염시키지 않기 위해서 사용합니다.

즉 변수를 전역(global scope)로 선언하는 것을 피하기 위해서입니다.


아래 코드는 지역변수를 익명함수로 위치시켜 외부와의 충돌을 방지하는 코드입니다.






이 외에도 조건문과 함께 사용하거나 클로저에서의 중복 현상 해결을 위해 사용되므로, 한번 찾아보시기 바랍니다. !  


반응형