JS - 라이브러리 만들기 위한 필수 무기 즉시실행함수 IIFE

실행컨텍스트, 및 웹팩 학습중 계속 등장하는 즉시 실행함수 개념을 정리하고자
글을 쓰게 됬다

즉시실행함수 ?

기본형태

(funtion (){
	......
})()

함수를 정의하고 바로 실행

변수에 저장가능

 const plus = (function (x){
 	return (x + x);
 })(10); 
 👉 console.log(plus) //20 

왜 즉시 실행함수가 필요한가 ?

글을 쓰는 이유이기도 하다

1. 즉시실행 함수로 클로저를 만들수있다

실행컨텍스트를 학습하면서 클로저에대해 깊게 학습할때
즉시 실행함수의 개념이 나오게되었다
=> 즉시실행함수를 사용하여 클로저를 만들수 있기떄문에 (예제 참조)
ex)

💁‍♂️ 클릭 이벤트가 될떄마다 'i' 변화를 alert 로 표현하려고 한다 
for (var i=0; i<10; i++){
	document.getElementById("point"+i).addEventListener('click',function(){
  alert(i) 
  });
}
하지만 결과는 '5'가 출력되게 된다 
=>반복문이 종료된후 함수실행(선언) 시 스코프가 생성되기 떄문에  

💁‍ 즉시실행 함수를 사용하여 클로저를 만들어보자 
 for (var i=0; i<10; i++){
  💁‍ j 에대한 클로저를 즉시실행 함수로 만들었다 
	(function(j){  	document.getElementById("point"+j).addEventListener('click',function(){
  alert(j) 
  })(i);
}

2. 초기화 하기 위해

1번과 연결되는 의미이기도하다 초기화를 하는이유는 결국
변수를 전역으로 선언하는 것을 피하기 위해서이다

참고

• Soyoung Chung Medium 즉시실행함수 :
  https://medium.com/@soyoung823/%EC%A6%89%EC%8B%9C%ED%98%B8%EC%B6%9C%ED%95%A8%EC%88%98-%EC%A6%89%EC%8B%9C%EC%8B%A4%ED%96%89%ED%95%A8%EC%88%98-iife-immediately-invoked-function-expression-7054dd236ef7
• zerocho 실행컨텍스트 : https://www.zerocho.com/category/JavaScript/post/5741d96d094da4986bc950a0