[javascript] 익명함수 재귀호출하기

관련지식
javascript, recursive, callee

자바스크립트에서 익명함수는 매우 유용하게 사용되지만 익명함수 안에서 자기 자신을 다시 호출해야 할때는 상황이 애매해집니다.

var count = 10;
setTimeout(function() {
  count--;
  console.log(count);
}, 1000);

위 소스는 매우 간단한 타이머 함수를 구현한것이지만 당연히 제대로 동작하지는 않습니다. 반복호출되지 않기 때문이죠. 사실 동일 함수를 반복호출하려면 setInterval() 함수를 사용하는게 맞지만 반복주기가 일정하지 않던가 반복조건이 단순하지 않다면 setTimeout() 을 사용하는것이 더 편할수 있습니다. 여기서는 setTimeout() 으로 호출해야 하는 상황으로 가정하겠습니다.

어쨌든 위 소스는 익명함수가 단 한번 호출하고 끝이납니다. 카운트가 0이 될때까지 반복하려면 익명함수 안에서 setTimeout()을 반복 호출해야 하는데 인자로 넘겨줄 익명함수를 어떻게 하면 될까요? callee 속성을 사용하면 됩니다.

var count = 10;
setTimeout(function() {
  count--;
  console.log(count);
  if(count > 0) {
    setTimeout(arguments.callee, 1000);  //자기 자신 호출
  }
}, 1000);

그런데 ES5의 strict mode(엄격한 모드)에서는 callee 속성을 사용할수 없습니다. 따라서 그때는 함수에 명시적인 이름을 사용해야 합니다.

var count = 10;
setTimeout(function asdf() {  //asdf 이름 붙임
  count--;
  console.log(count);
  if(count > 0) {
    setTimeout(asdf, 1000);
  }
}, 1000);

함수에 파라미터를 넘겨야 할때도 상관없습니다.

setTimeout(function(count) {
  count--;
  console.log(count);
  if(count > 0) {
    setTimeout(arguments.callee.bind(this, count), 1000);  //bind함수 호출
  }
}.bind(this, 10), 1000);  //bind함수 호출