3분 안에 설명되는 JavaScript의 IIFE(Immediately-Invoked Function Expressions)

십대 웹 개발자인 Gabriel Romualdo의 블로그인 xtrp.io에서 JavaScript, CSS 및 거의 모든 프로그래밍에 대한 게시물을 게시합니다.

많은 프로그래밍 언어와 마찬가지로 JavaScript에는 전역 변수가 포함되어 있습니다. 변수가 전역 변수임을 지정하지 않고 선언 및 정의된 후 어디에서나 모든 함수에서 액세스할 수 있는 변수입니다. 예를 들어:

// a global variable
var exampleStr = "Hello, World!"

function exampleFunction(){
    console.log(exampleStr)
}

exampleFunction();

// --> logs "Hello, World!" (contents of exampleStr global variable)

여기에서 전역 변수는 "Hello, World!"값으로 정의되었으며 호출된 함수는 해당 변수에 액세스하여 콘솔에 기록했습니다.

전역 변수는 이와 같은 소규모 사이트 및 코드 예제에 유용할 수 있지만 대규모 프로젝트 및 웹 앱에서는 문제를 일으킬 수 있습니다.

전역 변수가 유해할 수 있는 주된 이유 중 하나는 함수가 전역 변수인 다른 변수에 의해 이름이 이미 사용된 변수를 생성하거나 참조할 때 발생하는 변수 명명 충돌입니다.

이 예에서 충돌이 있는 변수 이름은 name입니다.

var name = "Fred"

function myFunction(){
    // intended to create variable, but changed global instead
    name = "John"

    // "John"
    console.log(name);
}

// "John", not "Fred"
console.log(name);

이것은 매우 기본적인 예이지만 JavaScript 코드가 많은 프로그램에서 전역 변수는 추적하기가 매우 어려워지고 디버그하기가 매우 어려울 수 있는 예기치 않은 심각한 문제를 일으킬 수 있습니다.

예를 들어, PHP 프로그래밍 언어의 창시자인 Rasmus Lerdorf는 전역 및 충돌과 관련된 매우 복잡한 버그가 있는 회사에서 근무했습니다. 버그를 찾기 위해 그는 종이에 수천 줄의 코드를 인쇄하고 코드에서 완전히 관련 없는 위치에서 서로 충돌하는 동일한 이름을 가진 두 개의 전역을 발견할 때까지 강조 표시했습니다. 원하는 경우 his talk about 25 years of PHP에서 이에 대한 자세한 내용을 들을 수 있습니다.

IIFE의 도움으로 전역 문제 해결

전역은 해당 함수가 명시적으로 정의되었는지, DOM 이벤트에 사용되었는지 또는 setTimeout() 또는 setInterval 와 같은 문에 래핑되었는지 여부에 관계없이 함수가 아닌 전역 범위에 있는 코드로 인해 자주 생성됩니다.

IIFE(또는 즉시 호출 함수 표현식)는 함수 내에서 JavaScript 코드를 작성할 수 있지만 해당 함수를 즉시 호출합니다. IIFE 내의 모든 코드는 전역 범위를 오염시키거나 전역을 생성해서는 안 됩니다.

(function(){})() 또는 (()=>{})()로 작성

IIFE는 함수를 괄호로 묶은 다음 (); 를 사용하여 일반처럼 해당 함수를 호출하여 작성됩니다.

다음은 전역 범위를 오염시키는 IIFE가 없는 프로그램의 예입니다.



이제 IIFE로:



ES6 Arrow Functions의 도입으로 IIFE는 다음과 같이 더 단축될 수 있습니다.

// Without ES6:
(function(){

})();

// With ES6:
(()=>{

})();

IIFE를 사용하는 경우

보다 복잡한 프로그램과 웹 앱에서는 전역 변수를 모두 제거하는 것이 도움이 될 수 있습니다. 이 경우 전역 코드가 거의 또는 전혀 정의되지 않습니다. 코드는 함수 및 IIFE에서 정의됩니다.

실제로 전역 변수를 함께 사용하지 않는 것이 매우 일반적이며 JavaScript에는 전역 변수의 사용을 방지하고 변수가 생성될 때 오류를 발생시키는 use strict라는 특수 리터럴이 있습니다. JavaScript use strict Explained in 2 Minutes을 참조하십시오.

소규모 사이트 및 스크립트의 경우 개인적으로 가능할 때마다 IIFE를 적극적으로 사용하고 전역 코드를 제한하는 것이 좋습니다. 저는 개인적으로 간결함을 위해 일부 기본 사이트에서 전역 변수를 사용하지만 코드의 전역 범위가 어떻게 생겼는지, 그리고 이를 기반으로 어떤 종류의 예기치 않은 문제가 발생할 수 있는지를 명확하게 이해하는 것이 중요합니다.

나는 당신이 이 기사를 즐겼고 IIFE가 당신이 미래의 프로젝트와 스크립트에서 사용할 수 있는 것을 발견하기를 바랍니다.

스크롤해주셔서 감사합니다.

이 게시물은 원래 my blog 에서 가져온 것입니다. 저는 10대 개발자로서 웹 개발과 거의 모든 프로그래밍에 대해 글을 씁니다.

— 가브리엘 로무알도, 2020년 2월 29일

참고: 이전에는 Fred Adams라는 가명으로 썼습니다.