======JavaScript - IIFE ====== * description : JavaScript Function Definitions * author : 오션 * email : shlim@repia.com * lastupdate : 2022-08-22 \\ ===== IIFE ===== * Immediately Invoked Function Expression * 즉시 실행 함수 표현 (즉시 호출되는 함수 표현식) * 정의되자마자 즉시 실행되는 JavaScript Function을 의미 * Self-Executing Anonymous Function (스스로 실행되는 익명 함수)이라고도 함 \\ ===== 기본 구문 ===== (function() { statements; })(); \\ 첫 번째 소괄호(''**()**'', Grouping Operator)로 둘러싸인 익명함수(Anonymous Function) ⇒ 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지하고, IIFE 내부로 다른 변수들이 접근하는 것을 받지 두 번째 소괄호 부분은 즉시 실행 함수를 생성하는 소괄호이다. 이를 통해 자바스크립트 엔진은 함수를 즉시 해석해서 실행한다. \\ ===== 예제 ===== 아래 함수는 즉시 실행되는 함수 표현이다. 표현 내부의 변수는 외부로부터의 접근이 불가능하다\\ (function () { var aName = "Barry"; })(); // IIFE 내부에서 정의된 변수는 외부 범위에서 접근이 불가능하다. aName; // Uncaught ReferenceError: aName is not defined \\ IIFE를 변수에 할당하면 IIFE 자체는 저장되지 않고, 함수가 실행된 결과만 저장된다.\\ var result = (function () { var name = "Bruce Willis"; return name; })(); // 즉시 결과를 생성한다. console.log(`result is ${result}`); // result is Bruce Willis \\ 선언한 함수를 아래와 같은 방식으로는 즉시 호출될 수 없다\\ function foo() { console.log('Hello Foo'); }(); // Uncaught SyntaxError: Unexpected token ')' \\ 하기와 같은 기명 또는 익명 함수 표현식은 즉시 호출될 수 있다.\\ (function foo() { console.log("Hello Foo"); // Hello Foo }()); // VS Code에서는 }());라고 입력하여도 자동으로 })();으로 변경됨 (function food() { console.log("Hello Food"); // Hello Food })(); (() => console.log("Hello World~~~~~"))(); // Hello World~~~~~ \\ ==== Ref Link === [[https://developer.mozilla.org/ko/docs/Glossary/IIFE|IIFE]]\\ [[https://developer.mozilla.org/ko/docs/Glossary/Function|함수]]\\ ==== 괄호 구분 ==== ^ 구분 ^ 괄호 ^ 영문 ^ | 소괄호 | ''**( )**'' | Square brackets | | 중괄호 | ''**{ }**'' | Curly brackets, Curly braces | | 대괄호 | ''**[ ]**'' | Parentheses | | 홑화살괄호 | ''**< >**'' | Angle brackets | {{tag>오션, Javascript Function Definitions}}