[Javascript]8. 즉시 실행 함수의 사용법과 주의사항

목차

1. 즉시 실행 함수란?
2. 즉시 실행 함수의 기본적인 구조

1. 즉시 실행 함수란?

즉시 실행 함수, IIFE(Immediately-involked-function)는 말 그대로 즉시 실행되는 함수이다. 즉시 실행 함수는 주로 함수를 선언하자마자 바로 호출을 할 때 사용된다. 아래 예를 보면 이해가 될 것이다. 아래 코드를 분석해 보자면 변수 a에 1이라는 수를 넣어주었고 x를 매개변수로 가지는 ong 함수를 호출하였다. ong 함수가 호출되면 문서에 매개변수 x에 1을 더한 값을 쓴다. 함수를 호출할때 매개변수 x에 a, 즉 1을 넣었기 때문에 2가 나온다. 이런 경우에는 선언이 되자마자 호출이 되었기 때문에 주로 이런 상황에서 즉시 실행 함수를 사용하는 것이 좋다.

const a = 1
function ong(x){
  document.write(x + 1)
}

ong(a)

2. 즉시 실행 함수 사용법

위에서 우린 즉시 실행 함수가 어떤 상황에서 쓰이는지 배웠다. 위의 코드를 즉시 실행 함수로 바꾸면 다음과 같다. 즉시 실행 함수는 두 가지가 있다. 한 가지는 (function (){})()형태 이고 다른 형태는 (function (){}())이다.  해당 과정을 자세하게 설명 해보자면 소괄호 안에 익명 함수를 선언하고 중괄호가 끝나는 부분에 소괄호를 적거나 소괄호 안에 익명 함수를 선언하고 익명 함수가 끝나는 부분에 소괄호 한쌍을 적는 방법이 있다.

const a = 1;

//ex1: (function{})()

(function (){
  document.write(a + 1)
})();


//ex2: (function{}())

(function (){
  document.write(a + 1)
}());

2-1. 즉시 실행 함수 사용시에 주의 해야하는것

C나 C++을 다뤄본 사람이라면 세미콜론(;)에 익숙할 것이다. 세미콜론은 한 코드 문장이 끝날때마다 사용된다. 자바스크립트는 그런 규율이 매우 자유로운 언어에 속하기 때문에 대부분의 경우에는 생략해도 된다. 하지만 즉시 실행 함수 사용 시에는 전 문장에서 세미콜론을 이용하여 해당 문장이 끝났다고 말을 해줘야 한다. 그렇지 않으면 아래와 같이 에러가 난다. 

꼭 세미콜론을 사용하도록 하자