IIFE

IIFE(Immediately Invoked Function Expresssion)
즉시 실행 함수 표현

말 그대로 선언과 동시에 즉시 실행되는 함수

쉬운 예제를 보자

//IIFE 아닌 경우
function a(){ //선언
  console.log("a")
}
a();//호출

함수를 선언하고 함수를 호출한다.
하지만 IIFE를 사용하면

(function a(){
console.log("a")
})()

위의 코드도 똑같이 콘솔에 a가 찍힌다. a()로 호출하는 코드가 없는데 어떻게 가능할까?
IIFE로 함수를 선언하자마자 즉시 호출 했기 때문이다.

조금 더 복합적인 아래 예시를 보자.
addEventListener의 이벤트로 IIFE를 넣어줬다.
넣어준 IIFE는 함수 inner를 return하고 있다.

여기서 자세하게 어떻게 count가 참조되는지 이해하기 위해서는
return한 함수 inner의 렉시컬 환경..이 등장해야하는데
렉시컬, 스코프, 클로저 이 세개를 알면 자세히 이해할 수 있을 것 같다.

아니면 일단 아래와 이해하자.

inner함수는 본인 함수와 함수를 감싸고 있던 주변의 함수 outer에 대한 기억을 갖고 있다.
그래서 inner 함수 안에서는 count 변수가 없지만 주변 함수 outer에게 count를 받아올 수 있는 것이다.

document.querySelector(".div").addEventListener("click",(function outer(){
  	let count = 0;
    return function inner(){
      console.log(count);
  	  count += 1;
    }
})())

IIFE 왜 쓰는가?

전역 스코프에 영향을 주지 않기 위해 사용

비동기 함수 실행

top-level await가 없는 이전 브라우저 및 JS 런타임에도 await, await를 사용 할 수 있음

(async () => {
   const stream = await getFileStream("https://domain.name/path/file.ext");
   await (const chunk of stream) {
    console.log({ chunk });
  }
})();

참고자료
https://velog.io/@doondoony/javascript-iife
https://developer.mozilla.org/ko/docs/Glossary/IIFE