Front-endJavaScript

즉시 실행 함수(Immediately-invoked function expression)

⏱ 읽기 소요 시간: 5 분

즉시 실행 함수(Immediately-invoked function expression)라는 키워드를 접하게 되어 정리해보고자 한다.
즉시 실행 함수란 무엇이며 어떤 경우에 사용하고 즉시 실행 함수를 이용하는 방법에 대해 알아보자.

즉시 실행 함수(Immediately-invoked function expression)란?

일반적인 함수는 선언과 호출을 각각 따로 하는데,
즉시 실행 함수는 함수를 정의함과 동시에 즉시 실행할 수 있다.

  • 따로 호출하는 코드를 작성할 필요가 없다.

  • 즉시 실행 함수의 종류는 기명 즉시 실행 함수(함수의 이름이 있는 즉시 실행 함수)와 익명 즉시 실행 함수(함수의 이름이 없는 즉시 실행 함수)가 있다.

즉시 실행 함수를 사용하는 이유

1. 초기화

  • 즉시 실행 함수는 최초로 한 번만 실행하는 초기화 코드에 많이 사용된다.
  • 변수를 전역으로 선언하지 않기 위해서이다.
  • 그 결과, 전역에 변수를 따로 추가하지 않아도 되므로 코드의 충돌 없이 구현할 수 있다.
  • 즉시 실행 함수의 경우 같은 함수를 다시 호출할 수 없다.
    -> 주로 플러그인이나 라이브러리 등을 만들 때 많이 사용된다.

2. 특정 스코프를 만들 때 사용

  • 익명 함수로써 레퍼런스 없이 즉각적으로 실행되기 때문에
    특정 스코프를 만들 때 유용하게 사용할 수 있다.

즉시 실행 함수를 만드는 방법

  • 즉시 실행 함수의 기본 형태는 아래와 같다.

즉시 실행 함수의 기본적인 형태

1
2
3
(function() {
  // statements
})();

즉시 실행 함수 예시

1
2
3
4
(function(food) {
  console.log("I want some " + food);
})("cake");
// I want some cake
  • 즉시 실행 함수로 만들기 위해서는 기명 함수이든 익명 함수이든 상관은 없다.
  • 함수 리터럴을 소괄호()로 둘러싸준다.
    1. 일반적인 함수를 작성한다. function(food) {...}

    1. 이 함수를 소괄호로 감싸주어 (function(food) {...}) 의 형태로 만들어 준다.

    1. 함수가 바로 실행될 수 있게 하기 위해 소괄호()한 쌍을 바로 뒤에 붙여준다.
      (function(food) {...})();

    1. 방금 추가한 ()안에 즉시 실행 함수의 인자로 넘길 값을 추가한다.
      (function(food) { ... })("cake");
    • 위의 예제에서는 ('cake')를 즉시 실행 함수의 인자로 넘겨서 호출하였다.
    • 이때, 'cake'는 food 매개변수로 넘겨지게 되는 것이다.

참고 링크

Share