즉시 실행 함수(IIFE)

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

정의되자마자 즉시 실행되는 자바스크립트 함수. 단 한번만 실행되고 외부 범위에서는 접근할 수 없다.

즉시실행함수를 변수에 할당할 경우, 이 함수 자체는 저장되지 않고 함수가 실행된 결과만 저장된다. 

 

(function () {
    console.log('즉시실행함수는 이렇게 쓰거나')
})();

(function () {
    console.log('이렇게 쓸 수 있습니다')
}());

 

특징

• 정의되자마자 바로 실행된다.
• 익명함수를 사용한다.
• 1회만 실행되고 다시는 실행하지 않는다.

이러한 특징으로 인해 즉시 싱행 함수는 주로 초기화를 하는 모듈이나 라이브러리, 프레임워크 소스들에서 많이 사용된다. 

 

 

장점

• 괄호 내에 익명 함수가 작성되어 있기 때문에 전역 스코프에 불필요한 변수를 추가해 오염시키는 것을 방지함
• 함수 내부로 다른 변수들의 접근을 막을 수 있음
  => 외부에서는 즉시 실행 함수의 변수에 접근할 수 없음

 

 

React에서의 즉시 실행 함수

또한 React의 useEffect에서 비동기 코드를 작성할때 즉시 실행 함수를 유용하게 사용할 수 있다. 

React에서는 useEffect 훅에 비동기 함수를 전달할 수 없는데, useEffect는 아무것도 반환하지 않거나 clean up 함수를 반환해야하기 때문이다.

 

그래서 useEffect 안에서 async/await를 사용하려면 useEffect 내에서 async/await 함수를 만들고 해당 함수를 바로 호출하는것이다. 따라서 이때 즉시 실행 함수를 유용하게 사용할 수 있다! 

useEffect(() => {
  (async () => {
    const res = await fetch(url);
  })();
}, []);

 

 

 

 

 

참고

https://developer.mozilla.org/ko/docs/Glossary/IIFE

IIFE - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

 

https://cocoder16.tistory.com/44

Javascript에서 즉시 실행 함수 사용하기

https://javascript.plainenglish.io/iifes-can-change-the-way-you-write-the-useeffect-hook-in-react-a5cb5d69d14a

IIFE’s Will Change The Way You Use React Hooks