즉시 실행 함수의 개념과 사용 이유

"즉시 실행 함수"란
함수를 정의하자마자 즉시 실행되는 함수 표현식을 의미합니다.
이 기법은 변수 호이스팅과 스코프 오염을 방지하기 위해 사용되며, 함수 블록 내에서 코드를 작성할 때 유용합니다. 함수는 정의와 동시에 실행되며, 주로 브라우저 컴파일러에 의해 함수가 로드된 직후에 호출됩니다.

자바스크립에서는 변수의 스코프(유효범위)는 대단히 골치 아픈 경우가 많습니다.

전역 변수가 많으면 개발자간 혹은 자바스크립트 파일간에 충돌이 발생하거나 변수가 의도하지 않는 오염이 생길 수 있습니다. 심지어 var 키워드로 선언한 변수나 함수 선언식은 스코프의 최상단으로 끌어올려지는 호이스팅이 발생하게 됩니다.

그래서, 자바스크립트 개발자들은 골치 아픈 변수의 스코프 문제를 해결하려고 함수의 특징을 이용한 코딩기법을을 사용하게 되었습니다. - 물론 모던한 자바스크립트에서는 module을 이용하면 쉽게 이 골치 아픈 일을 해결할 수 있습니다. -

자바스크립트에서 함수는 큰 특징이 있습니다.

  • 함수 블록(혹은 '함수 바디'라고도 함) 내에 선언한 변수는 변수의 스코프가 함수 블록 내에서만 유효하다.
  • 함수는 원하는 위치에서 호출하여 실행할 수 있다.

자바스크립트 개발자들은 자바스크립트에서 사용되는 함수의 특징에 대해 생각하게 되었습니다.

함수를 정의하고 함수 (블록 혹은 바디) 안에 변수를 선언하고 이 정의한 함수를 즉시 실행하도록 하면, 함수 안에 선언한 변수는 변수의 스코프가 함수 안에서만 유효하니 이 골치 아픈 스코프의 문제를 해결할 수 있다는 것에 착안한 것입니다. 이 코딩 기법이 "즉시 실행 함수" 표현식입니다.

다음은 즉시 실행 함수의 예제입니다.

JavaScript 즉시 실행 함수의 일반적인 예 - 보통 익명 함수를 사용합니다. 
(function() { // 즉시 실행 함수
    let a = 1;
    let b = 2;
    let c = a + b;
    console.log(c);
})();

let a = 2; // 즉시 실행 함수의 변수 a와 충돌이 발생하지 않음
console에서 출력된 모습 함수를 호출하지 않아도 함수가 직접 호출되어 console에서 출력됩니다.

아직 즉시 실행 함수 표현식을 어떻게 코딩하는지 모르더라도 어떻습니까? 이젠 골치 아픈 스코프의 문제를 해결했습니다.

즉시 실행 함수를 다시 한 번 정의해 보겠습니다.

즉시 실행 함수란
변수 호이스팅을 방지하고 스코프의 오염을 방지하기 위해 함수의 특징을 활용하여 함수 블로 내에서 코딩하는 기법으로, 정의되자마자 즉시 실행되는(브라우저 컴파일러에 함수가 로드된 후 직접 호출되는) 함수 표현식을 의미합니다.

그럼, 다음 섹션에서는 즉시 실행 함수 표현식을 어떻게 작성하는지에 대해 알아보겠습니다.

즉시 실행 함수 표현식 이해하기

위에서 언급한 것처럼, 즉시 실행 함수 표현식이란 정의되자마자 즉시 실행되는 함수 표현식입니다. 정확히 말하자면 브라우저의 자바스크립트 컴파일러에 함수가 로드된 후 직접 호출되는 함수 표현식을 의미합니다.

자바스크립트에서 함수의 호출은 다음과 같습니다.

JavaScript 
함수명();

함수의 호출은 함수명 오른쪽에 ()를 사용합니다. 물론 매개변수가 있을 경우에는 (전달인자)와 같이 호출하게 됩니다.

즉시 실행 함수 표현식은

  1. 함수를 정의하고
  2. ()나 매개변수가 있을 경우 (전달인자)를 사용해서

정의한 함수를 즉시 호출하는 표현식입니다.
그럼, 위 순서대로 즉시 실행 표현식을 만들어 보겠습니다.

함수를 정의

JavaScript 
function fn() { /* code */ }

위 코드 예제는 기명 함수 선언식으로 함수를 정의한 것입니다.

()나 매개변수가 있을 경우 (전달인자)를 사용해서 정의한 함수를 즉시 호출

JavaScript 예제처럼 ()를 그냥 함수 오른쪽에 사용하면 에러가 발생합니다. 
function fn() { /* code */ }(); // Uncaught SyntaxError: Unexpected token ')'

위 예제는 자바스크립트 함수 선언문의 형식에 맞지 않기 때문에 에러가 발생합니다.

다음과 같이 작성하면 에러가 발생하지 않고 즉시 실행하는 함수 표현식을 만들 수 있습니다.

JavaScript 예제처럼 ()를 그냥 함수 오른쪽에 사용하면 에러가 발생합니다. 
(function fn() { /* code */ }());

함수를 선언하고 ()로 호출한 것을 소괄호로 묶어 주면 에러가 발생하지 않습니다.

여기에서 함수를 선언하고 ()로 호출한 것을 묶어준 소괄호는 함수를 호출하는 기능이 아니라 그룹 연산자입니다.

()는 함수를 호출하는 용도로만 사용되지 않고 그룹 연산자로 사용되기도 합니다. 그룹 연산자란 ()로 피연산자를 감싸서 표현식을 우선 평가하게 하는 연산자를 말합니다.

함수를 선언하고 ()로 호출한 것을 그룹 연산자인 소괄호로 묶어 주면 묶어 준 함수와 함수 호출이 표현식으로 바뀌게 됩니다. 표현식은 값(Value)을 생성하거나 특정한 동작을 수행하는 코드 조각을 말합니다. 표현식으로 바뀐다는 것은 소괄호로 묶어 준 코드가 실행한다는 것을 의미합니다.

자바스크립트로 함수를 즉시 실행할 수 있는 방법은 다양합니다. 크게 두 부류로 나눌 수 있습니다.

  • 그룹 연산자 ()를 이용하는 방법
  • 단항 연산자의 특징을 이용하는 방법

그룹 연산자 ()를 이용하는 방법

JavaScript 
(function fn() {
    /* code */ 
}());

(function fn() {
    /* code */ 
})();

단항 연산자의 특징을 이용하는 방법

JavaScript 
!function fn() {
    /* code */ 
}();

+function fn() {
    /* code */ 
}();

-function fn() {
    /* code */ 
}();

!, +, - 등은 대표적인 단항 연산자입니다. 단항 연산자들 중에서 피연산자가 우변에 있는 단항 연산자는 위 코드 예제와 같이 표현식이 되어 코드가 실행된다는 것을 의미합니다. 다시 말하면 즉시 실행하는 함수가 됩니다.

즉시 실행 함수 사용하기

주로 익명 함수로 사용

즉시 실행 함수는 함수의 정의와 동시에 즉시 호출되기 때문에 함수의 이름이 필요하지 않는 경우가 많습니다. 그래서 익명 함수를 주로 사용합니다.

JavaScript 
(function () {
    /* code */ 
}());

한 번만 호출되고 다시 호출할 수 없음

즉시 실행 함수는 함수의 정의와 동시에 즉시 호출되는 표현식이기 때문에 다시 호출할 수 없습니다.

JavaScript 
const fn = (function() {
    console.log("단 한번만 호출됩니다.");
}());

// 출력: "단 한번만 호출됩니다."

fn(); // Uncaught TypeError: fn is not a function

매개변수를 이용하는 방법

JavaScript 
(function(initialValue) {
    let count = initialValue;
    console.log(count);
}(10));

// 출력: 10

참고문헌