자바스크립트 즉시실행함수 :: 마이구미

이번 글은 자바스크립트에서 즉시실행함수에 대해 알아볼 것이다.

한번 쯤은 봤을 것이고,  궁금증을 가졌을 것이다.

표기법은 많지만, 일반적으로 아래와 같이 쓰인다.

(function() {
  console.log("!!");
}());

일단 먼저, 자바스크립트에서는 함수를 표기할 때 크게 두 분류로 나뉜다.

함수 선언문과 함수 표현식이다. 한 가지 더 나누자면 즉시실행함수로 볼 수 있다.

함수 선언문과 함수 표현식에 대해서는 다음 글에 다뤄볼 예정이다.

즉시실행함수는 이름 그대로 즉시 실행하는 함수이다.

즉, 선언과 동시에 실행이 된다.

function fn() {
  conosle.log("!!");
}

var fn = function() {
  conosle.log("!!");
}

fn(); // fn함수 호출

//선언과 동시에 호출
(function() {
  console.log("!!");
}());

기존의 함수 호출 방식과는 다르게 선언과 동시에 실행되는 것이 즉시실행함수이다.

또한 내부에 있는 변수를 외부에서의 접근을 통제할 수 있다.

// 외부 허용
var fn = (function() {
  var name = "lee";
  
  return {
    name: name
  }
}());

console.log(fn.name) // lee

//외부 허용 x
(function(){
  var name = "lee";
  
  return {
    name: name
  }
}())

이러한 이유로 즉시실행함수는 플러그인이나 라이브러리에 많이 사용하고 있다.

예를 통해 보자.

//디스커스
(function() {
    var d = document, s = d.createElement('script');
    s.src = '//test213424.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
})();

//제이쿼리
(function( global, factory ) {
  //.......
}(//........))

이러한 플러그인이나 라이브러리 같은 경우는 변수에 추가 하지 않아도 되기에 코드 충돌을 방지할 수 있고,

외부 접근을 통제할 수 있도록 하기위해 즉시실행함수를 이용한다.

코드 충돌에 대한 방지의 대표적인 예는 ,

제이쿼리와 함께 $변수를 이용하는 라이브러리를 사용할 때 문제가 생긴다.

$라는 전역 변수를 이용하기 때문에  $변수에 대해 충돌이 생길 것이다.

(function($) {
    console.log($);
}(jQuery));

위와 같이 즉시실행함수 내부에는 $변수는 jQuery를 이용하게 된다.

위처럼 필요한 녀석을 인자를 넘겨주어 즉시실행함수 내부에서 이용가능하다.

위의 디스커스 소스를 즉시실행함수 인자로 넘겨주는 형태로 바꿔보자.

//디스커스
(function(d,s) {
    s.src = '//test213424.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
})(documnet, 'script');

이런 식으로 이용할 수 있겠다.

다음 글은 함수 선언문과 함수 표현식에 대해서는 다음 글에 다뤄볼 예정이라고 했다.

참고 자료

http://benalman.com/news/2010/11/immediately-invoked-function-expression/