전역 변수를 줄이기 위해

전역 변수를 줄이기 위해, 즉시 실행 함수(IIFE, Immediately-Invoked Function Expression)를 사용

플러그인이나 라이브러리 등을 만들 때 많이 사용

이 함수는 선언과 동시에 바로 실행되므로 전역 변수를 만들지 않아, 플러그인이나 라이브러리 등을 만들 때 많이 사용됩

전역 네임스페이스를 오염시키지 않음

그렇기 때문에, 재사용할 필요 없이 한번만 호출할 함수들은 즉시 실행 함수 패턴을 사용하면 전역 네임스페이스를 오염시키지 않습니다.

즉시객체 초기화 패턴

괄호로 묶어서 바로 초기화하는 사용 방식과, 전역 변수를 만들지 않는다는 장점이 즉시 실행 함수와 비슷합니다. 단점으로는 대부분의 JavaScript 압축 도구가 즉시 실행 함수에 비해 효과적으로 압축하지 못한다는 것입니다

({
    // 속성 정의
    name: "nextree",

    // 객체 메소드 정의
    getName: function () {
        return this.name;
    },

    // 초기화 메소드 정의
    init: function () {
        console.log(this.getName());   // nextree 출력
    }
}).init();

남용하면 메모리낭비 발생

또 한가지 고려해야 할 것은, 즉시 실행 함수와 즉시 객체 초기화의 남용으로 인한 메모리 낭비입니다. JavaScript는 이렇게 할당이 없이 정의만 할 경우, 전역 네임스페이스는 건드리지 않더라도, 전역 실행 컨텍스트(EC: Execution Context)의 temp=[]내에 key-value를 추가하게 됩니다. 이 EC.temp영역은 개발자가 접근할 수 없는 영역입니다. 그렇기 때문에 스크립트 내의 다른 영역은 물론 어디에서도 접근할 수 없어, 소스코드의 신뢰성에는 큰 도움이 됩니다. 하지만 같은 이유로 이 패턴을 남용하면, 직접 관리 할 수 없는 공간에 메모리가 계속 쌓이게 됩니다. 그렇기 때문에 소스코드의 신뢰성과 메모리의 문제를 함께 고민해서, 이를 남용하지 않고 적절히 사용해야 합니다.

ㅇㅋ

즉시 실행함수도 함수이기 때문에 변수에 저장이가능 변수에 즉시실행함수 리턴값 저장

즉시 실행함수는 한 번의 실행만 필요로하는 초기화 부분에 많이 사용됨 근데 왜? 초기화에 많이쓰임??글로볼 전역으로 선언을 피하기 위해서다 전역에 변수를 추가하지 않아도 되서 코드 충돌없이 구현이 가능

플러그인이나 라이브러리 만들때 특히 많이 사용

즉시 실행함수 vs 자기호출함수??

똑같은거 아님?? ㅇㅋㅇㅋ

IIFE=즉시 실행 함수 (Immediately-invoked function expression)란?

함수표현식은 함수를 정의하고, 변수에 함수를 저장하고 실행하는 일련의 과정을 거칩니다. 하지만, 즉시실행함수를 사용하면 이와 같은 과정을 거치지 않고 즉시 실행된다는 특징이 있습니다. 차이점이라면 단순히 함수를 괄호”()”로 랩핑한 게 전부입니다. 이런 함수를 즉시실행함수(IIFE)라 부릅니다.

이번에는 변수를 선언하고 이 변수에 즉시실행함수를 할당해 보겠습니다.

var app = (function() {
var privateVar = ‘private’; return { prop : privateVar }; }()); console.log(app.prop); // “private” 출력
콘솔에는 “private” 라고 출력됩니다.

즉시실행함수 내에서 선언한 변수를 외부에서도 접근할 수 있음을 확인할 수 있습니다. 변수의 접근 범위가 함수 내부가 아닌 외부에서도 가능해진 것입니다. 이와 같이, 즉시실행함수는 변수의 스코프를 포함하는데 사용되며 외부에서 함수 내의 변수에 접근할 경우 이를 통제할 수 있습니다. 즉시실행함수는 글로벌 네임스페이스에 변수를 추가하지 않아도 되기 때문에 코드 충돌이 없이 구현할 수 있어 플러그인이나 라이브러리 등을 만들 때 많이 사용됩니다.

Immediately-invoked function expression 영어를 해석하면 즉시-호출 함수 표현 입니다. 즉시 실행 함수(IIFE)는 함수 표현(function expression)과 같이 익명 함수 표현, 기명 함수 표현으로 할 수 있습니다.

출처: https://beomy.tistory.com/9 [beomy]

출처: https://beomy.tistory.com/9 [beomy]

함수를 정의하자마자 바로 호출하는 것을 즉시 실행하는 함수

最初は グループ演算子 () に囲まれた静的スコープ付きの無名関数

2 つ目の部分は即時実行関数式の () で、これを通じて JavaScript エンジンは直接関数を解釈実行 (interpret)します。

Self-Executing Anonymous Function とも呼ばれるこのデザインパターンには主な 2 つの部分があります。

Self-Executing Anonymous Function とも呼ばれるこのデザインパターンには主な 2 つの部分があります。最初は グループ演算子 () に囲まれた静的スコープ付きの無名関数です。これは IIFE イディオム内部の変数が、グローバルスコープの汚染と同様にアクセスされるのを防ぎます。

2 つ目の部分は即時実行関数式の () で、これを通じて JavaScript エンジンは直接関数を解釈実行 (interpret)します。

출처: https://beomy.tistory.com/9 [beomy]

출처: https://beomy.tistory.com/9 [beomy]

즉시실행함수의 기본형태

(function () {
    // statements
})()

왜 사용 ?

jQuery나 Prototype 라이브러리는 동일한 $라는 글로벌 변수를 사용합니다. 만약, 이 두개의 라이브러리를 같이 사용한다면 $ 변수에 대한 충돌이 생길 것입니다. 하지만, 즉시실행함수의 코드 블럭에서 jQuery를 위한 $ 변수를 사용하고자 한다면 아래와 같이 파라미터를 전달하는 방법으로 Prototype의 $ 변수에 대한 overwritting을 예방할 수 있습니다.

(function($) { // 함수 스코프 내에서 $는 jQuery Object임. console.log($); }(jQuery));

1. 즉시 실행 함수를 사용하는 이유 초기화 즉시 실행 함수는 한 번의 실행만 필요로 하는 초기화 코드 부분에 많이 사용됩니다.

그렇다면 왜 초기화 코드 부분에 많이 사용 할까요? 변수를 전역(global scope)으로 선언하는 것을 피하기 위해서 입니다. 전역에 변수를 추가하지 않아도 되기 때문에 코드 충돌 없이 구현 할 수 있어, 플러그인이나 라이브러리 등을 만들 때 많이 사용됩니다.

IIFE는 주로 전역 영역(Global Scope)를 오염시키지 않기 위해서 사용합니다.

즉 변수를 전역(global scope)로 선언하는 것을 피하기 위해서입니다.

아래 코드는 지역변수를 익명함수로 위치시켜 외부와의 충돌을 방지하는 코드입니다.

IIFE (Immediately Invoked Function Expression; 即時実行関数式) は定義されるとすぐに実行される JavaScript 関数 です。

Self-Executing Anonymous Function とも呼ばれるこのデザインパターンには主な 2 つの部分があります。最初は グループ演算子 () に囲まれた静的スコープ付きの無名関数

{() => {return <div>...</div>}} (edited) 요런식으로 니꼬샘이 부르짓던 divide and conquer

brightparagon [10:16 AM] {(() =>})()} 이건 IIFE 입니다

1. 즉시 실행 함수를 사용하는 이유 초기화 즉시 실행 함수는 한 번의 실행만 필요로 하는 초기화 코드 부분에 많이 사용됩니다.

그렇다면 왜 초기화 코드 부분에 많이 사용 할까요? 변수를 전역(global scope)으로 선언하는 것을 피하기 위해서 입니다. 전역에 변수를 추가하지 않아도 되기 때문에 코드 충돌 없이 구현 할 수 있어, 플러그인이나 라이브러리 등을 만들 때 많이 사용됩니다.

출처: https://beomy.tistory.com/9 [beomy]

출처: https://beomy.tistory.com/9 [beomy] 시 실행 함수 표현식 또는 IIFE(immediately invoked function expression) 이라고 부르며, 자바스크립트의 블록 스코프 지원을 위한 필수적인 차선책이다. 대안으로 사용할 수 있는 변형으로는 다음과 같이 지역 변수를 IIFE의 파라미터로 바인딩하고 그 값을 인자로 전달하는 방법이 있다.

출처: https://weicomes.tistory.com/148 [25%]

Reference Link:

https://beomy.tistory.com/9
https://beomy.tistory.com/9
http://www.nextree.co.kr/p4150/

http://projectl33t.xyz/archives/50808
https://developer.mozilla.org/ja/docs/Glossary/IIFE
https://beomy.tistory.com/9
https://developer.mozilla.org/ja/docs/Glossary/IIFE
https://moonscode.tistory.com/12
https://jw910911.tistory.com/21
https://moonscode.tistory.com/12
http://chanlee.github.io/2014/01/11/understand-javascript-iife/
https://gist.github.com/LeoHeo/7c2a2a6dbcf80becaaa1e61e90091e5d

• ← Previous Post
• Next Post →