IIFE

즉시실행함수(IIFE)

(name => {
  console.log(`hello ${name}`);
})('heaeun'); // hello heaeun

위와같은 것을 즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)이라고 하며, 함수를 정의함과 동시에 실행합니다

사용방법

즉시 실행 함수는 반드시 그룹 연산자 ( ... ) 로 감싸야 합니다.

만약 아래처럼 그룹 연산자로 감싸지 않고 실행하면 에러가 발생합니다

(name) => {
  console.log(`hello ${name}`);
}('heaeun')

에러 발생 !

Uncaught SyntaxError: Unexpected token '('

👉🏻 에러가 발생하는 이유 ? (자바스크립트 딥다이브 12.7 참고)

함수 선언문 뒤의 (...) 는 함수 호출 연산자가 아니라 그룹 연산자로 해석되기 때문입니다.

👉🏻 그룹 연산자로 함수 선언문을 감싸는 이유?

• 그룹 연산자의 피연산자는 값으로 평가됩니다
• 그룹 연산자로 함수를 묶어주면 함수 리터럴을 평가해서 함수 객체를 생성할 수 있습니다.
• 함수객체 뒤의 ()는 함수 호출 연산자로 해석됩니다

🤔 어떠한 문제를 해결하나요?

• 전역 네임스페이스의 오염을 막아줍니다
• 자바스크립트의 특성상 변수의 스코프는 해당 변수를 감싸고 있는 함수 블럭으로 제한되는데, 이러한 특징을 사용해 변수 혹은 함수의 전역화를 최소화 시킬 수 있습니다
• IIFE로 모든 코드를 감싸면 IIFE 안에 있는 모든 변수는 IIFE의 지역 변수가 됩니다. 이러한 특성을 이용해 전역변수의 사용을 제한할 수 있습니다

🤔 즉시 실행 함수를 어떠한 경우에 사용하나요?

모듈패턴을 사용 하거나 스코프를 타이트하게 제한을 할 때 사용하던 문법입니다.

모듈 패턴

• 관련이 있는 변수와 함수를 IIFE로 감싸 하나의 모듈을 만드는 것
• 클로저를 기반으로 동작한다
• 전역 변수의 억제 구현 가능
• 캡슐화 구현 가능

스코프

• 모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신의 참조할 수 있는 유효 범위가 결정됩니다
• 식별자가 유효한 범위를 뜻합니다
• 식별자를 검색할 때 사용하는 규칙

최근에는 es6의 import 문법때문에 많이 사용되지는 않지만 async, await을 사용할때는 사용됩니다

async, await은 함수 안에서만 사용이 가능합니다

function getUser() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('heaeun');
    }, 3000);
  });
}

(async () => {
  const user = await getUser(); // promise를 반환하는 함수 앞에 await을 붙입니다.
  console.log('user ? ', user); // 3초뒤에 heaeun이 찍힙니다.
})();

es6 import 키워드

다른 모듈에서 공개한 식별자를 자신의 모듈 스코프 내부로 로드하려면 import 키워드를 사용합니다 (자바스크립트 딥다이브 참고 - 48.3.3)

요약

즉시 실행 함수는 함수 블럭 단위로 지역 변수를 가지는 특성을 사용해 무분별한 전역 변수의 남발을 제한하는 하나의 방법이다