Recursive Function (재귀함수)

재귀함수란, 함수 내부에서 함수 자기 자신을 다시 호출하는 것이다.

function foo(){
	foo();
}

1. Factorial을 통한 예시

1.1 반복문을 사용하는 경우

function factorial(n){
  var result = 1;
  for (var i = n; i >= 1; i--){
    result *= i;
  }
  return result;
}

factorial(n);

1.2 재귀함수를 이용하는 경우

function factorial (n) {
  if (n === 1){
    return 1;
  }
  return n * factorial(n -1);
}

factorial(n);

위의 예제에서 if구문이 없다면 해당 코드는 무한루프에 빠지게 된다. 재귀함수를 사용하는 경우 반드시 Base Case가 존재해야 한다.

Base Case : 재귀없이 종료될 수 있는 조건의 상태

2. DOM Element Console 예제

2.1 재귀함수를 사용하지 않을 경우

function logAll (el) {
  console.log(el.tagName);

	if ( el.children.length > 0 ) {
		for( var i = 0; i < el.childeren.length; i++) {
      console.log(el.children[i].tagName);

			if (el.children[i].children.length > 0){
				for (var j = 0; j < el.children[i].children.length; j++) {
          console.log(el.children[i].children[j].tagName);

          if(/* 자식의 자식...*/){
          }
        }
			}
		}
	}
}

logAll (document.body);

해당 코드는 개수와 관계없이 모든 DOM 요소들을 모두 console하는 코드이다. 이처럼 무한반복을 해야하는 코드는 재귀함수를 통해 아래와 같이 바꿀 수 있다.

2.2 재귀함수를 사용하는 경우

function logAll (el){
    console.log(el.tagName);

    if(el.childeren.length > 0){
      for (var i = 0; i < el.childeren.length; i++){
        logAll(el.childeren[i]);
      }
    }
  }

  logAll (document.body);

재귀함수를 사용하려는 경우, 처음부터 재귀를 짜려는 생각을 하지말고 어떤 내용이 실행되어야 하는지 써본 뒤 반복되는 코드를 찾아서 재귀함수를 만들어보고 반복되는 곳에 바뀌는 값들이 있으면 매개변수로 처리한다.

위의 예제의 경우, 자식의 자식들을 상대로 계속해서 반복해 나아가는 점을 확인 후 재귀함수로 바꾸었다.

참고 사이트

• jakeseo_me - Recursive Function
• webclub - Recursive Function
• mohwaproject - Recursive Function