문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

======JavaScript - IIFE ======
<WRAP left notice 80%>
  * description : JavaScript Function Definitions
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2022-08-22
</WRAP>
<WRAP clear></WRAP>
\\

===== IIFE =====
  * Immediately Invoked Function Expression
  * 즉시 실행 함수 표현 (즉시 호출되는 함수 표현식)
  * 정의되자마자 즉시 실행되는 JavaScript Function을 의미
  * Self-Executing Anonymous Function (스스로 실행되는 익명 함수)이라고도 함
\\
===== 기본 구문 =====
<code javascript>
(function() {
    statements;
})();
</code>
\\
  첫 번째 소괄호(''**()**'', Grouping Operator)로 둘러싸인 익명함수(Anonymous Function)
  ⇒ 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지하고, IIFE 내부로 다른 변수들이 접근하는 것을 받지

  두 번째 소괄호 부분은 즉시 실행 함수를 생성하는 소괄호이다. 이를 통해 자바스크립트 엔진은 함수를 즉시 해석해서 실행한다.
\\

===== 예제 =====
아래 함수는 즉시 실행되는 함수 표현이다. 표현 내부의 변수는 외부로부터의 접근이 불가능하다\\
<code javascript>
(function () {
    var aName = "Barry";
})();

// IIFE 내부에서 정의된 변수는 외부 범위에서 접근이 불가능하다.

aName; // Uncaught ReferenceError: aName is not defined

</code>
\\
IIFE를 변수에 할당하면 IIFE 자체는 저장되지 않고, 함수가 실행된 결과만 저장된다.\\
<code javascript>
var result = (function () {
    var name = "Bruce Willis";
    return name;
})();
// 즉시 결과를 생성한다.
console.log(`result is ${result}`);   // result is Bruce Willis
</code>
\\
선언한 함수를 아래와 같은 방식으로는 즉시 호출될 수 없다\\
<code javascript>
function foo() {
    console.log('Hello Foo');
}();
// Uncaught SyntaxError: Unexpected token ')'
</code>
\\
하기와 같은 기명 또는 익명 함수 표현식은 즉시 호출될 수 있다.\\
<code javascript>
(function foo() {
    console.log("Hello Foo");   // Hello Foo
}());
// VS Code에서는 }());라고 입력하여도 자동으로 })();으로 변경됨

(function food() {
    console.log("Hello Food");  // Hello Food
})();


(() => console.log("Hello World~~~~~"))();    // Hello World~~~~~

</code>
\\
==== 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}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구