자바스크립트 재귀함수(호출)



재귀함수(호출)란?


정의:

1. 자기 자신을 재호출하는 함수를 말한다.

2. 보통 트리 구조에 대한 알고리즘을 작성할 때 유용하며, 그 외에 여러 가지로 활용할 수 있습니다.


  1. function reflection(base, i)
  2. {
  3.     var r = ''
  4.  
  5.     if (i === 0){
  6.         r = 1;
  7.     }
  8.     else{
  9.         r = base * reflection(base, i - 1);
  10.     }
  11.  
  12.     return r;
  13. }
  14.  
  15.  
  16. reflection(2, 2); // 4


아래는 작성된 재귀함수의 실행 순서를 나타냅니다.


1. reflection() 함수를 호출합니다.

2. reflection() 함수의 매개변수 base와 i의 값으로 각 각 2 가 정의 됩니다.

3. 최초 매개변수 i의 값이 0이 아니므로 조건문 내부의 else 블록({}) 9번라인의 표현식이 실행됩니다.

4. 자바스크립트의 표현식은 오른쪽에서 왼쪽으로 평가되므로 i가 2일 때 재귀호출 reflection(base, i - 1)의 반환 값은 2를 반환하며, 그에 따라 ((base(2)) * (재귀호출 반환 값(2))) 4를 최종 반환합니다.




앞에서도 말했듯이 재귀함수는 트리 구조 탐색에 유용하게 쓰일 수 있다고 하였습니다.


아래는 그에 대한 예제 소스입니다.


  1. // 해당 엘리먼트에 포함된 모든 textNode.nodeValue를 가져온다.
  2. function text(elem, txt)
  3. {
  4.    
  5.     var t = [];
  6.    
  7.     if (!txt)
  8.     {
  9.         elem = elem.childNodes || elem;
  10.  
  11.         for (var i = 0, length = elem.length; i < length; i++){
  12.            
  13.             var e = elem[i];           
  14.             t.push(e && e.nodeType !== 1 ? e.nodeValue : text(e.childNodes));
  15.         }
  16.     }
  17.     else
  18.     {
  19.         t.push(createTextNode(elem, txt));
  20.     }
  21.    
  22.     return t.join('').replace(/(^[\s]*)|([\s]*$)/g, '');
  23. };
  24.  
  25.  
  26. // text 노드 생성
  27. function createTextNode(elem, txt){
  28.    
  29.     elem = elem || document.documentElement;
  30.  
  31.     txt = txt || '';
  32.  
  33.     var $t = document.createTextNode(txt);
  34.    
  35.     elem.appendChild($t);
  36.  
  37.     return text(elem);
  38. };
  39.  
  40. alert(text(null, 'test')); // ....test
  41. alert(text(document.body, 'test')); // ....test
  42. alert(text(document.getElementById('test1'), 'test')); // ....test


작성된 코드에 대해 설명하자면, 함수 매개변수로 해당 엘리먼트와 동적으로 삽입시킬 text를 정의하여 호출할수 있습니다.

또한, 매개변수가 한 개만 있는 경우는 해당 엘리먼트에 포함된 모든 text를 가져오며, 두 번째 매개변수인 text를 정의하면 해당 text가 정의된 text 노드를 반환하게 됩니다.