[JavaScript] IIFE

IIFE는 무엇인가요?

IIFE는 즉시 실행 함수 표현식(Immediately Invoked Function Expression)으로 정의되자마자 즉시 실행되는 함수입니다.

 

// 1
(function () {
    console.log('IIFE');
})();

// 2
(() => console.log('IIFE'))();

// 3
(() => {
    console.log('IIFE');
})();

즉시 실행 함수는 함수 리터럴을 '( )'로 감싼 뒤 바로 실행하는 형태가 일반적입니다.

 

즉시 실행 함수를 보면 '( )'가 두 개 있습니다.

전자의 '( )'는 함수 리터럴로 주로 익명함수(Anonymous Function)로 작성할 수 있습니다. 다만 함수를 함수 선언문이 아닌 함수 표현식으로 작성해야 합니다.

후자의 '( )'는 함수를 실행할 때 사용되는 괄호입니다. 자바스크립트 엔진이 문법을 읽고 선언된 함수를 즉각적으로 실행하게 됩니다.

 

 

IIFE는 언제 사용하나요?

즉시 실행 함수 내의 변수는 외부로부터 접근이 불가능합니다.

그래서 불필요한 전역 변수와 함수를 생성하지 않고, 즉시 실행 함수 내에세 생성된 변수와 함수 이름은 전역 scope와 충돌하지 않는다는 장점이 있습니다.

(function () {
    let name = "songyi";
})();

console.log(name); // Uncaught ReferenceError: name is not defined

 

즉시 실행 함수를 변수에 할당하면 함수 자체는 저장되지 않고, 함수가 실행된 결과만 저장됩니다.

let result = (function () {
    let name = "songyi";
    return name;
})();

console.log(result); // "songyi"

 

IIFE는 함수를 즉시 실행시켜야 할 때, 함수를 딱 한번만 실행시켜야 할 때, 변수의 사용 범위를 제한할 때 사용할 수 있습니다.

 

 

Reference

• IIFE-MDN