본문 바로가기

프론트엔드/Javascript

즉시 실행 함수(IIFE)

728x90
반응형
SMALL
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}`;
})();

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

즉시 실행 함수에서 사용하는 변수들은 함수 내에서만 유효하기 때문에 이런 점을 활용하면, 일시적으로 사용할 변수의 이름들을 조금 자유롭게 작성할 수도 있다.

728x90
LIST

'프론트엔드 > Javascript' 카테고리의 다른 글

Spread 구문  (0) 2022.01.30
문장 vs 표현식  (0) 2022.01.28
null 병합 연산자 ??  (0) 2022.01.26
AND 와 OR 연산자의 연산 우선순위  (0) 2022.01.26
typeof 연산자  (0) 2022.01.25