익명함수와 즉시실행함수표현(IIFE)

익명함수 : 함수의 이름이 생략된 함수

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions

차이점은 어디서 오냐면, 위에서 언급한 호이스팅의 개념에서 온다.

일반함수의 경우, 함수 전체가 전부 맨 위로 올라가므로 함수를 호출하는 위치에 상관없이 사용될 수 있다고 했다. 반면, 리터럴 방식으로 사용되는 익명 함수의 경우, 호이스팅 시 함수를 담는 변수의 선언부만 위로 올라가고, 익명 함수 자체는 변수가 호출되었을 때 실행되기 때문에, 선언부가 호출 위치보다 위에 있어야 한다. 

(티스토리 사막하는 개발여우님 블로그 - https://dev-note-97.tistory.com/273)

 

즉시실행함수

(function () {
    statements
})();

이는 Self-Executing Anonymous Function 으로 알려진 디자인 패턴이고 크게 두 부분으로 구성된다. 첫 번째는 괄호((), Grouping Operator)로 둘러싸인 익명함수(Anonymous Function)이다. 이는 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지할 수 있을 뿐 아니라 IIFE 내부안으로 다른 변수들이 접근하는 것을 막을 수 있는 방법이다.

두 번째 부분은 즉시 실행 함수를 생성하는 괄호()이다. 이를 통해 자바스크립트 엔진은 함수를 즉시 해석해서 실행한다.

 

이것을 활용해 아래와 같은 async 함수를

  useEffect(() => {
    (async () => {
      const response = await fetch(`https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`)
      const json = await response.json();
  }, []);

깔끔하게 익명함수로 사용할 수 있다.

(괄호가 많아 지저분해보일지라도)

useEffect(() => {
    (async () => {
      const { results } = await (
        await fetch(
          `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`
        )
      ).json();
    })();
  }, []);