💻 Frontend
JavaScript IIFE란?
category
💻 Frontend
스코프 공부를 하다가 아래와 같은 문법을 보았다. 처음보는 구조에 신기하여 구글링 하였더니 IIFE라는 나한테는 생소했던 문법이었다.
(function(){ })()
이 문법의 의미는 무엇이고 언제 사용하는지 알아보자!
IIFE
IIFE는 Immediately Invoked Function Expression의 약자이다.
Immediately즉시
Invoked호출됨
Function함수
Expression표현
정의되자마자 즉시 실행되는 함수를 말한다.
기본 문법
첫 번째 괄호에는 익명함수를 포함하고 두 번째 함수는 그 함수를 실행시켜주는 걸로 볼 수 있다. 매개변수가 있는 함수라면 두번째 함수에 전달해주면 된다. ES6 문법에 추가된 화살표 함수와 함께 사용할 수 있다.
(function(){ })()
(()=>{ })()
표현 내부의 변수는 외부로부터의 접근이 불가능하다. IIFE를 변수에 할당하면 IIFE 자체는 저장되지 않고, 함수가 실행된 결과만 저장된다.
var result = (function () { var name = "Barry"; return name; })(); // 즉시 결과를 생성한다. result; // "Barry"
종종 IIFE 앞에
; 세미콜론이 붙는 경우도 있다. ;(function() { console.log('semi') })();
이는 IIFE 이전 코드의 세미콜론이 생략된 경우 에러를 발생하기 때문에 대비한 것이다. 아래 예제를 보면 이해가 될 것이다.
var name = value //변수 선언하다 세미콜론이 안써있는 경우, 바로 이전 코드에서 세미콜론이 없는 경우 (function() { console.log('semi') })();
위 코드는 아래와 같이 해석된다.
var name = value(function() { console.log('semi') })();
위의 코드는 에러를 발생시키기 때문에 종종 앞에 세미콜론이 붙는 경우가 있다. 참고하자!
IIFE의 목적
IIFE의 주요 이점은 다음과 같다.
- 불필요한 전역 변수와 함수를 생성하지 않는다. (전역변수 사용을 억제할 수 있다.)
- closure와 함께 private data를 사용할 수 있다.
- 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지할 수 있다.
- IIFE 내부 안으로 다른 변수들이 접근하는 것을 막을 수 있다.
IIFE는 한번 실행되고 사라진다. 최초 한 번의 실행만 요구되는 초기화 코드에 적합하다.
function init() { var operate = 'init'; console.log(operate) } init()
만약 함수를 하나 만들어 사용한다면 이 함수는
전역 스코프에 선언되어 선언 충돌이 발생할수도 있으며, 개발자 의도와 달리 다른 코드에 의해 재호출 될 수도 있다. 따라서 외부 코드로부터 사용되지 않는 변수와 함수들은 IIFE를 사용하여 전역 스코프 오염을 방지하고, 다른 개발자가 실수로 호출할 수 없도록 하는게 바람직합다.(function init() { var operate = 'init'; console.log(operate) })() console.log(operate) // operate is not defiend
이렇게 IIFE를 활용하면 IIFE 선언된 변수와 함수는 외부에서 접근이 불가능하다.
마무리
면접 질문
Q: IIFE가 무엇이고 또 어떨 때 사용하나요?
A: IIFE는 즉시 실행하는 함수이고, 한번 실행하고 그 이후에 사용하지 않을 때 사용합니다. 불필요한 변수 사용을 줄여줍니다.
