예전에 더 공부할 것으로 남겨놓았던 IIFE에 대해 공부할 기회가 생겨 정리해 보았다.
즉시 실행 함수 표현식
IIFE(Immediately Invoked Function Expression)를 사용하면 글로벌 스코프에 선언된 함수나 변수에 접근하는 것을 막아서 예기치 못한 에러를 방지할 수 있다.
즉시 실행 함수 표현식 (이하 IIFE)은 예전 var 는 함수 스코프이기 때문에, 블록 레벨 스코프를 갖기 위해 고민하던 중 한가지 방안으로 고안되었다. 지금은 잘 사용하지 않으며, 함수 표현식을 ()()괄호에 감싸는 형태로 만들 수 있다. 함수 선언식에서는 함수를 정의함과 동시에 호출하는 것을 허용하지 않기 때문에 함수 표현식으로 인식하도록 속일 수 있다.
👉 여기
함수 선언과 동시에 호출하기
// IIFE를 만드는 방법
(function() {
alert("함수를 괄호로 둘러싸기");
})();
(function() {
alert("전체를 괄호로 둘러싸기");
}());
!function() {
alert("표현식 앞에 비트 NOT 연산자 붙이기");
}();
+function() {
alert("표현식 앞에 단항 덧셈 연산자 붙이기");
}();첫번째 두번째는 예전 프로젝트 다른 코드에서 종종 본 적이 있었는데, 아래 두개는 생소했다. 모던 자바스크립트에서는 이렇게 코드를 작성할 필요가 없으며, 오래된 스크립트를 해석하는데 알아둘 필요는 있다.
React에서 IIFE 사용하기
위 IIFE의 용도와 다르게, useEffect로 fetch 비동기 구문을 작성할 때 IIFE를 사용하면서 React에서 어떻게 쓰이는지 궁금해서 찾아보았다.
클로저 대신으로 사용하는 것 외에도 IIFE는 유용한 장점을 가지고 있다. 한번만 사용할 함수를 선언과 호출을 하는 것보다 간결하게 표현할 수 있으며 useEffect Hook에서 async/await를 사용하여 promise를 리턴할 수 있다. 👉 여기
비동기 구문에서 IIFE
useEffect(() => {
(async () => {
const res = await fetch(url);
})();
}, []);if statement
react에서는 if문을 사용하지 못하고 대신 삼항연산자로 가능하다고 배웠는데, IIFE로 (굳이) if문으로도 가능하다고 한다. (즉 JSX 안에서 함수를 실행하고자 할 때)
function App() {
return (
<div className="App">
<h1>If statement with IIFE</h1>
<div>
{(() => {
if (true) {
return "Wow!";
} else {
return "Boo";
}
})()}
</div>
</div>
);
}출처
