Peep

자바스크립트 전역 스코프에 정의된 것은 코드 내의 어디서든지 접근이 가능하다는 것이 문제가 되고는 합니다.

이때 외부에 공유되면 안되거나 충돌날 위험이 있는 경우 즉시 실행 함수를 통해 해결하고는 합니다.

즉시 실행 함수(IIFE)

단순하게 함수와의 차이를 보자면 즉시 실행되는지 아닌지의 차이입니다.

함수표현식은 함수를 정의하고, 변수에 함수를 저장하고 실행하는 일련의 과정이 있습니다.

하지만 즉시실행함수는 이러한 과정없이 즉시 실행됩니다.

문법의 차이는 단순히 함수를 괄호 "()"로 랩핑한다는 것입니다.

형태

(function() {
    console.log('즉시 실행 함수'); 
}());

var now = (function () { 
    console.log('즉시 실행 함수')    
})();

익명, 기명 즉시 실행 함수

(function () { 
	console.log('익명 즉시 실행 함수'); 
}());

(function now() { 
	console.log('기명 즉시 실행 함수'); 
}());

사용이유

자바스크립트의 모듈 패턴에서 사용할 수 있습니다.

전역 스코프에 정의하는 것이 아닌 즉시실행함수의 스코프에서 실행컨텍스트가 활성화됩니다.

이렇게되면 유효범위가 다른 곳에서 접근하려고 할때 은닉해주는 성질을 지닐 수 있습니다. (캡슐화)

물론 아예 접근이 안되는 것은 아닙니다. 접근하는 방법은 있습니다.

즉..

즉시실행함수로 일반적인 유효범위를 설정하는 언어에서와 같이 private와 public등의 캡슐화를 사용할 수 있습니다.

캡슐화를 해야하는 이유는 무엇일까요? 당연히 충돌을 방지하기 위해서입니다.

즉시실행함수는 플러그인이나 라이브러리에서 많이 사용됩니다.

예시

jQuery 라이브러리에서 $라는 전역변수를 사용하고 있는데, 또 다른 라이브러리를 도입하게되었을 경우...

추가 된 라이브러리도 $라는 전역변수가 있으면 충돌이 생기게됩니다.

이때 

즉시 실행 함수를 사용하여 $ 전역 변수의 충돌을 피할 수 있습니다.

(fucntion($) {
 	//.....
})(jQuery); // jQuery 인자로 전달

참고 

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/function

즉시 실행 함수 (IIFE, Immediately-Invoked Function Expression)

• 즉시 실행하여야하지만 전역 스코프(Global Scope)를 오염시키지 않으려고 할때 사용한다.
• 함수 리터럴을 ( )로 감싼 뒤 바로 실행하는 형태가 일반적이며 기명도 가능하고 익명도 가능하다.
• ( )로 감싸주는 이유는 자바스크립트는 function(){ } 키워드를 사용할 경우 파서가 선언문으로 인지한다.
• 선언문은 해석기에서 실행 후 사라지기에 값으로 존재하지 않는다. 때문에 "함수 표현식"을 통해 명시적으로 나타내줘야한다.
• ( )를 붙이는 것 외에도 연산자를 앞에 붙일 경우에도 즉시 실행된다.

-function(a, b){ return console.log(a + b) })(1,2) // 3
// 즉시 실행됨

하지만 보통 ( )로 묶는 표현 방법을 사용한다.

(function(a, b){ return console.log(a + b) })(1,2) // 3
// 즉시 실행됨

;(function(a, b){ return console.log(a + b) })(1,2) // 3
// 즉시 실행되며 앞에 값과 이어진 값으로 평가받는것을 방지할 때 세미콜론을 사용한다.

함수 선언문이 아닌 함수 표현식으로 작성해야한다.

const hello = function(){} // (X)

(function(){
    // ..
})(); // (O)

(function(){
    // ..
}()); // (O)

단순히 위의 예시는 코드 스타일의 차이이나 화살표함수일 경우 아래 예시처럼 첫번째 방법만 사용이 가능하다.

(() => {
    // ..
})(); // (O)

(() => {
    // ..
}()); // (X)

아래와 같이 호출하는 경우 함수 호출을 하기 위한 호출대상이 명세에서 말하는 Member Expression 이어야하나 화살표함수는 Assignment Expression 이기때문에 불가능하다고 한다. 

(화살표 함수의 => 화살표는 연산자가 아닌 것으로 취급되며 화살표 함수 자체의 파싱이 특별하게 취급되기 때문이라고 하는데,  Assignment Expression로 인식되나봄???)

참고 ↓↓↓↓

https://stackoverflow.com/questions/34589488/es6-immediately-invoked-arrow-function/34589765#34589765

위와 같은 이유로 ( ) 없이 사용하는 ! 연산자또한 즉시실행 함수 표현식에서 문법오류가 발생한다.

((a, b) => a + b)(1, 2); // 3
!(a, b) => a + b)(1, 2); // Uncaught SyntaxError

출처 및 참고

IIFE (Immediately-Invoked Function Expression)

https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/iife.md

자바스크립트의 IIFE

https://velog.io/@doondoony/javascript-iife