IIFE ( Immediately Invoked Function Expression ) 패턴

Immediately Invoked Function Expression 

즉시 호출된 함수 그러니까 즉시호출함수 패턴은 말그대로 함수를 즉시 실행하도록 하는 자바스크립트 디자인 패턴이다. 

 

이 패턴은 함수를 정의하고 바로 호출하여, 전역 스코프의 오염을 방지하고 변수를 보호할 수 있다.

 

일반적으로 다음과 같이 구현된다. 

 

(function (){

// code

})();

 

이 패턴을 사용하면 함수를 선언하는 동시에 호출할 수 있으므로 전역 스코프에 선언된 변수가 함수 내부에서 사용되는 것을 방지할 수 있다. 

 

또한 이 패턴은 모듈화된 코드를 작성하는 데에 유용하다. 

 

 

아래 함수는 즉시 실행되는 함수 표현으로서, 내부의 변수는 외부로부터의 접근이 불가능하다

(function () {
	var aName = "Barry";
})();

aName
// throws "aName is not defined"

IIFE를 변수에 할당하면 IIFE 자체는 저장하지 않고, 함수가 실행된 결과만 저장된다. 

var result = (function (){
	var name = "Barry";
    return name;
 })();
 // 즉시 결과를 생성한다
 result;
 // "Barry"

 

 

---

 

  useEffect(() => {

    (async () => {
      const savedLogs = await logsStorage.get();
      if (savedLogs) {
        initialLogsRef.current = savedLogs;
        setLogs(savedLogs);
      }
    })();
  }, []);

위는 즉시호출로 작성된 코드이다. AsyncStorage의 값을 가져오는 건데

 

useEffect( () =>{
    async function save(){
     const savedLogs = await logStorage.get();
     if(savedLogs){
        initialLogsRef.current = savedLogs;
        setLogs(savedLogs);
     }
     }
     save()
},[]);

이렇게 작성할 수도 있다. 

 

음.. 즉시호출의 장점을 다시 보겠다.

 

1. 전역 스코프의 오염 방지

IIFE를 사용하면 함수 내부에서 선언된 변수와 함수들은 함수 스코프 내에서만 유효합니다. ( 이건 당연 )

이를 통해 전역 스코프의 오염을 방지할 수 있다. 

--> 그런데 전역 스코프의 오염은 변수명이라던지 특별히 겹치지 않고 조심해서 코드를 작성한다면 크게 의미가 없지 않을까

 

2. 변수 보호

마찬가지로 함수스코프 내에서 선언된 변수를 외부에서 접근할 수 없다는 것이다. 

 

3. 모듈화

IIFE를 사용하면 객체, 변수, 함수 등을 모듈화 하여 코드를 조직화할 수 있다.

이를 통해 코드의 재사용성을 높이고, 유지 보수성을 향상시킬 수 있다.

 

4. 즉시 실행

IIFE를 사용하면 함수를 선언과 동시에 실행할 수 있다.

이를 통해 초기화 코드를 간결하게 작성할 수 있고, 효율적으로 사용할 수 있다. 

 

그러니까 전역 스코프의 오염과 변수 보호 등의 문제를 하결하는데에 유용하며, 모듈화와 초기화 코드의 간결한 작성 등의 장점을 가지고 있다. 

 

흐음 근데 전역 스코프의 오염은 이전에 함수스코프인 var를 사용해서 변수를 선언했을때의 이야기인 것 같다. 

var를 쓰면 스코프의 문제 때문에 코드 작성 시에 흐름 파악이 힘들 것 같다.

하지만 지금은 블록스코프인 let 과 const를 주로 쓰기 때문에, 1번과 2번의 장점은 지금 유효하지 않은 것 같다.

3-4 번은 큰 장점이 아닌 것 같다.

 

 

때문에 앞으로 IIFE 패턴은 왠만하면 지양하는 것으로 하자!

왜냐하면 쉽고 가독성 좋은 코드를 작성하고 싶기 때문이다!