웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

자기 실행 함수를 사용해 무한반복 만들기

Last Modified : 2016-04-29 / Created : 2016-04-15
17,259
View Count
자기실행함수(self-invoking function)에 대하여 알아보고 이를 활용해 무한 반복하여 특정 함수를 실행시키려한다. 이 때 무한 반복을 하기 위한 setInterval()을 사용하는 것과의 차이점을 알아보고자 한다.



# 자기실행 함수


자기 실행함수 또는 자기실행 익명함수는 스스로 실행하는 함수를 의미한다. 아래의 함수를 보면...

function doSomething() {
   ...
}

이 함수는 선언되었지만 실행되지는 않았다. 이를 실행하기 위해서는 doSomething()을 사용해 함수를 호출해야만 가능하다. 하지만 
이를 즉시 실행하는 방법이 있으니 이를 바로 self-invoking 함수, 즉 자기실행 함수라고 하는 것이다.

자기 실행함수의 사용은 매우 간단한데 아래와 같이 사용할 수 있다.

// 방법 1
(function() {
   ...
})()


// 또 다른 방법 2
! function() {
   ...
}()


아마 뭔가 특징이 있다는 것을 알아챌 수 있는데 바로 뒤에 () 기호를 더하는 것이 즉시 실행하게 해주는 역할을 하게된다.



# 자기실행함수의 활용


스스로 작동하는 함수는 어떻게 활용할 수 있을까? 그 중하나가 무한히 반복하는 함수를 만들 경우이다. 이를 만들기 위해서 간단한 방법은 바로 setInterval()을 사용하는 방법일 것이다. 하지만 이 방법 외에도 다른 방법이 있으니 자기실행함수를 이용하는 방법이 그것이다. 아래의 코드는 일정 간격으로 반복되는 코드를 작성한 부분이다. 물론 자기실행 함수를 사용하였다.

! function test() {
   alert();
   setTimeout(function() {
      test();
   }, 5000);
}()

이 코드를 실행하면 5초 간격을 두고 test() 함수를 실행하게 되어 alert() 경고창을 계속 띄우게된다. 사실 기능면에서 setInterval()을 사용한 것과 거의 동일하게 작동할 것이다. 만약 이 코드를 setInterval()을 사용해 작성한다면 다음과 같을 것이다.

function test() {
   alert();
}

setInterval(function() {
   test();
}, 5000);

이 두 가지 코드의 차이점이 있다면 어떤 것이 있을까? setInterval()을 사용하게되면 함수의 실행 여부와 상관없이 5초간 지난 시간에 함수가 호출되게된다. 하지만 만약 위의 코드로 자기실행함수에 의해 작동된다면 결과가 조금 다르게 나타난다. 실행되고 있는 코드가 끝나야만 동작한다는 점이다...

이 부분은 굉장히 큰 차이라고 볼 수 있다. 개발자의 의도에 따라 전혀 다른 결과를 낳을 수 있기 때문이다. 만약 비동기식으로 ajax를 사용할 경우 ~ ajax의 결과에 따라 데이터를 받아왔을 경우에만 동작하게끔 만들 수 있을 것이다.

Previous

[자바스크립트] 배열을 역순으로 정렬, reverse()

Previous

href 속성에 javascript void:(0) 사용하는 이유