[함수 다루기] 04. 즉시 실행 함수(IIFE)

지금까지 함수를 선언하는 다양한 방법에 대해 살펴봤는데요.

함수를 선언하는 것은 함수를 실행하는 것과 다르다는 사실, 모두 알고 계시죠?

function sayHi() {
  console.log('Hi!');
}
  
sayHi();

일반적으로는 이렇게 함수를 먼저 선언한 다음,선언된 함수 이름 뒤에 소괄호를 붙여서 함수를 실행하는데요.

그런데 때로는 함수가 선언된 순간에 바로 실행을 할 수도 있습니다.

즉시 실행 함수

(function () {
  console.log('Hi!');
})();

보시는 것처럼 함수선언 부분을 소괄호로 감싼 다음에 바로 뒤에 함수를 실행하는 소괄호를 한 번 더 붙여주는 방식인데요. 이렇게 하면 함수가 선언된 순간 바로 실행이 되는 겁니다.

이렇게 함수 선언과 동시에 즉시 실행되는 함수를 가리켜 즉시 실행 함수 (표현)이라고 부르는데요. 영어로는 Immediately Invoked Function Expression, 줄여서 IIFE라고 부릅니다.

(function (x, y) {
  consoel.log(x + y);
})(3, 5);

그리고 즉시 실행 함수도 일반 함수처럼 파라미터를 작성하고, 함수를 호출할 때 아규먼트를 전달할 수도 있는데요. 한 가지 주의할 점은 즉시 실행 함수는 함수에 이름을 지어주더라도 외부에서 재사용할 수 없다는 겁니다.

(function sayHi() {
  console.log('Hi!');
})();

sayHi(); // ReferenceError

그래서 일반적으로는 이름이 없는 익명 함수를 사용하는데요. 다만, 이름이 있는 함수 표현식 레슨에서도 살펴봤던 것처럼 함수 내부에서 자기 자신을 호출하는 재귀적인 구조를 만들고자 할 땐 이름이 필요할 수도 있으니까 이 부분은 참고해 주세요!

(function countdown(n) {
  console.log(n);
  if (n === 0) {
    console.log('End!');
  } else {
    countdown(n - 1);
  }
})(5);

즉시 실행 함수의 활용

즉시 실행 함수는 말 그대로 선언과 동시에 실행이 이뤄지기 때문에 일반적으로 프로그램 초기화 기능에 많이 활용됩니다.

(function init() {
  // 프로그램이 실행 될 때 기본적으로 동작할 코드들..
})();

혹은 재사용이 필요 없는, 일회성 동작을 구성할 때 활용하기도 하는데요.

const firstName = Young;
const lastName = Kang;

const greetingMessage = (function () {
  const fullName = `${firstName} ${lastName} `;

  return `Hi! My name is ${fullName}`;
})();

이렇게 함수의 리턴값을 바로 변수에 할당하고 싶을 때 활용할 수 있습니다.

그리고, 전역변수와 지역변수의 개념 알고 계시죠? 즉시 실행 함수에서 사용하는 변수들은 함수 내에서만 유효하기 때문에 이런 점을 활용하면, 일시적으로 사용할 변수의 이름들을 조금 자유롭게 작성할 수도 있습니다.