(8) Modern JavaScript - 즉시 실행 함수 (IIFE)

일반적으로는 아래와 같이 함수를 먼저 선언한 다음 

선언된 함수 이름 뒤에 소괄호를 붙여서 붙여서 함수를 실행하는데

때로 함수가 선언된 순간에 바로 실행을 할 수도 있다.

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

---

즉시 실행 함수 - IIFE

아래와 같이 함수 선언 부분을 소괄호로 감싼 다음

바로 뒤에 함수를 실행하는 소괄호를 한 번 더 붙여주는 방식이며

이렇게 함수가 선언된 순간 바로 실행된다.

// 즉시 실행 함수
 
(function () {
  console.log("Hi!");
})();

 

이렇게 함수 선언과 동시에 즉시 실행되는 함수를 가리켜

즉시 실행 함수 (Immediately Invoked Function Expression) 라고 한다.

---

또한 아래와 같이 즉시 실행 함수도 일반 함수처럼 파라미터를 작성하고

함수를 호출할 때 사용하게 되는 일련의 값들인 agument를 전달할 수도 있다.

(function (x, y) {
  console.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 = "Seop";
const lastName = "E";
 
const greetingMessage = (function () {
  const fullName = `${firstName} ${lastName} `;
 
  return `Hi! My name is ${fullName}`;
})();
 
console.log(greetingMessage);

 

또한 즉시 실행 함수에서 사용하는 변수들은 함수 내에서만 유효하기 때문에

일시적으로 사용할 변수의 이름들을 조금 자유롭게 작성할 수 있다.