[JS] 즉시실행함수(IIFE)란?

 

 

자바스크립트에서 함수는 가장 중요한 핵심 개념이다. 이러한 함수에도 여러 형태가 있는데, 이번에 다시 "초심으로 돌아가 개념들을 살펴보자!!"는 마음가짐으로 찾아보다가 즉시 실행 함수라는 것을 처음으로 알게 되었다. 역시 보면 볼수록 모르는게 계속 툭툭 튀어나오니 공부할 맛이 나는 것 같다.

 

각설하고, 이렇게 요상하게 생긴 아이를 처음 보았기 때문에 호기심이 생겼다. 아래는 즉시 실행 함수에 대해 찾아본 내용을 정리한 것이다. 그래서, 도대체 즉시 실행 함수는 뭘까?!

 

 

 

Immediately (즉시) Invoked (실행되는) Function Expression (함수 표현)

말 그대로, 즉시 실행 함수는 정의됨과 동시에 즉시 호출되는 함수를 뜻한다. 영어로 IIFE라고 표기하며, 발음은 "iffy"로 불린다고 한다. 그렇다면, 먼저 코드 생김새를 보고 안면을 트도록 하자.

 

// 🥲
(function becomePoor() {
  const allIHave = 6000
  const macbook = 6000
  return allIHave - macbook
}())


// 화살표 함수로 작성할 수도 있다👍
( () => {
  ...
}())

 

일반 함수 모양에 익숙했던 내 눈엔 저렇게 괄호 안에 작성된 즉시 실행 함수가 엄청 해괴해보였다. 그러나 그 의미를 이해하고나니 수긍할 수 있게 되었다. 위와 같이, 즉시 실행 함수는 괄호 ( ) 안에 작성하며, 단 한번만 호출되고 다시 호출할 수 없다. 

 

즉시 실행 함수는 이름 없이 익명으로 사용하는 것이 일반적이지만, 위 예제 중 첫번째에선 슬픔을 제대로 표현하기 위해 이름을 붙였다. 다만, 이름을 붙인다고 해서 나중에 다시 호출할 수 있게 되는 것은 아니기 때문에 유의가 필요하다. (두번 가난해지고 싶지 않기도하고)

 

위 예제 코드에서 눈여겨 보아야 하는 것은 맨 아래줄에 있는 ( ) 이다. 이 괄호 ( )는 바로 즉시 실행되는 함수에 넣어줄 인자를 입력하면 된다. 아래는 인자까지 전달하는 모습을 보여주는 예제이다.

 

(function add (a, b) {
  a === 1 && b === 1 ? '귀요미😝' : a + b
}(1, 1))

 

 

 

 

 

 

그런데... 왜 사용하는 거지? 🤔

즉시 실행 함수라는 것이 정의됨과 동시에 곧 바로, 그것도 단 한번 불리는 함수라는 것은 이해할 수 있었다. 그런데 그런 함수가 왜 필요한 것이지?라는 의문이 들었다. 아직 자바스크립트 개발자로서 신생아이기 때문에 다양한 코드가 필요한 상황을 맞닦뜨려보지 않아서 식견이 짧기 때문이다 (흑흑 🥲).  그래서 검색을 해보았더니, 역시나! 생각치도 못했던 경우들이 있었다!

 

 

1. 가장 많이 사용하는 경우: 특정 변수로의 접근을 막기 위해

특정 변수에 대한 접근을 정의된 함수의 스코프 내에서만 허용되도록 만들기 위해 즉시 실행 함수를 사용할 수 있다고 한다. 글로벌 스코프에 선언된 함수 또는 변수는, 만약 브라우저가 로드하는 자바스크립트 파일이 여러 개인 경우, 다른 자바스크립트 파일에서도 접근이 가능하게 된다. 이러한 예기치 못한 접근을 방지하기 위해 즉시 실행 함수를 사용할 수 있다.

 

아직 나는 이런 경우를 경험해보지 못했기 때문에 구체적인 사용 형태가 잘 상상이 가지 않는 건 사실이지만, 아마 현업에서 일을 하다보면 어느 정도 감출 필요가 있는 비즈니스 로직이라던가 우리 코드만의 secret ingredient라던가, 즉시 실행 함수를 필요로하는 경우가 생길 수 있을 것이라고 생각한다.

 

 

 

2. 사용하는 라이브러리들의 변수명이 충돌할 경우

 

이런 상황도 아직 나는 당해보지 않은 경우인데, 앞으로 충분히 일어날 수 있을 법한 일인 것 같다. 내가 검색해서 참고로 찾아보았던 블로그의 예제에선, jQuery와 Cash라는 라이브러리 모두 $ 를 사용하기 때문에 일어날 수 있는 충돌을 즉시 실행 함수로 예방할 수 있다고 설명했다 (링크).

 

아직 개발자로의 연차가 긴 것이 아니라서 즉시 실행 함수를 직접 작성할 필요성을 느낀 경우가 딱히 없었다. 하지만 앞으로 여러 경우를 맞닥뜨리고, 여러 문제를 직면하게되면서 언젠가는 직접 프로젝트에 적용해볼 수 있을 것이라고 생각한다.

 

 

+++ 추가 사항 (2021. 08.24) +++

우연히, IIFE가 모던 자바스크립트에서도 꼭 사용되어야 하는가에 대한 글을 읽었다. 글을 쓴 분은 모던 자바스크립트에선 (ES6+) block scoping을 제공하고, import/export를 통한 모듈화된 코드를 사용할 수 있기 때문에 더 이상 IIFE를 쓰지 않아도 된다고 작성하셨다. IIFE를 실제로 써본 적이 없는 나로썬 귀가 팔랑팔랑해져서 "어엇 그런가?!?!"라고 생각하다가 다양한 의견이 달린 댓글들을 보고 흥미롭다고 생각하여 추가한다.

 

 

<댓글에서 읽은 IIFE 사용처>

- "IIFE는 클로저가 아니다. 클로저 대신에 IIFE를 사용해본적이 없다. IIFE는 굉장히 유용하며, 필요할 때 사용되어져야 한다. ... 이름에서 알 수 있듯이, 즉시 함수를 실행해야하는 경우에 사용하라. 한번만 사용할 함수를 정의한 뒤에 곧바로 호출하는 것보다 훨씬 쉽고 깨끗하다."

 

- React의 useEffect 안에서 async/await을 사용하기 위해 IIFE를 쓸 수 있다. 원래 useEffect의 콜백은 프로미스를 리턴하지 못하게 하지만 IIFE를 사용하면 가능해진다고 한다:

 

useEffect(() => {
  (async function fetchResults() {
    const results = await fetch(url)
  {)()

}, [url])