자바스크립트의 재귀에 대한 이해

자바스크립트가 가지고 있는 수 많은 것들 중 하나는 재귀적으로 함수를 호출하는 능력입니다.
이러한 특징은 언어가 사용될 수 없는 경우를 보상하기 위하여 굉장히 노력하는 중요한 함수로 제공되고 있습니다.

재귀란 무엇입니까?

불행히도 대부분의 기술 개념과 마찬가지로 단순히 Google "재귀"를 찾는다면 그 정의를 이해하기가 다소 어려울 수 있습니다.

"재귀(Recursion) — 부분적으로 전체의 적용을 요구하는 프로그램 또는 루틴과 관련되어 있으므로, 명시적인 해석은 일반적으로 많은 연속적인 실행을 필요로 합니다."

위의 내용이 걱정된다면 걱정할 필요없습니다. 왜냐하면 그 개념은 믿을 수 없을 정도로 과장된 표현이며 생각하는 것 만큼 복잡하지 않기 때문이다.

간단히 말해서 자바스크립트에서의 재귀는 그 자체에서 함수를 호출하는 기능입니다.  

여전히 이해가되지 않습니까? 괜찮습니다. 가장 간단한 형태에서 시작하여 재귀의 몇 가지 예를 살펴 보겠습니다.

Example 1 : 무한 재귀. (이 코드를 실행하지 마십시오!)

function demo() {
demo();
}
demo();

보시다시피 위의 함수 (demo)가 호출됩니다. 그런 다음 demo에서 찾은 명령을 실행합니다. demo안에서 demo함수를 호출 합니다. 호출... 호출... 이 프로세스는 페이지나 브라우저가 충돌 할 때까지 무한대로 계속됩니다.

이것이 재귀입니다. 함수 demo자체에서 함수 demo를 호출하는 기능입니다.

위의 예제는 터무니없이 도움이되지 않지만 중요한 것은 재귀의 개념입니다. 아직은 잘 보이지 않을지 모르지만, 함수 자체를 호출하는 기능은 무수한 방법으로 유용합니다.

Example 2: Leave Event 설정

자바스크립트에서 재귀 함수를 구성 할때는 Leave Event가 있어야 합니다.
Leave Event란 무엇입니까?
함수가 재귀 루프를 종료 할 수 있게하는 제어문입니다.
이것은 if문, 삼항인수, switch문 등이 될 수 있습니다.

간단한 카운트 다운 함수의 예 :

function countDown(n) {
  console.log(n);
  if(n >= 1) countDown(n-1);
}
countDown(5);

이 코드는 콘솔에서 5에서 0으로 카운트 다운됩니다.

이 간단한 데모는 우리가 하고있는 일과 사실에 대해 감사해야하며, 이 기능이 for-loop의 기능을 완벽하게 모방한다는 것을 인식 할 수 있습니다.

function countDown(n) {
  for(let i=n; i >=0;i--) {
   console.log(i);
  } 
}
countDown(5);

물론 이 경우와 똑같은 현상이라는 사실을 알게 되도 놀랄 일은 아닙니다. 이것은 왜 우리가 자바스크립트 루프를 통해 '재귀를 사용해야 하는가'라는 질문을 던집니다.

솔직히 말하면, 코딩을하는 사람의 재량에 달려 있습니다. 함수형 프로그래밍 패러다임을 사용하지 않으면(자세한 정보를 원하면 함수형 프로그래밍 이해 기사를 읽을 수 있음) 재귀 함수를 선호하는 루프를 포기할 구체적인 이유가 없습니다. 나는 이것이 대부분 사실이라는 것을 강조하고 싶습니다.

재귀가 더 나은 옵션 인 경우도 있습니다.

Example 3: 재귀 순회

자바스크립트의 기본적인 목적 중 하나는 DOM을 조작하는 능력입니다.
만약 당신이 자바스크립트를 광범위하게 프로그래밍해오지 않았거나, 바닐라 자바스크립트에 익숙하지 않을 뿐더러, 라이브러리를 사용하여 기능을 추상화해왔다면, 당신은 아마도 자바스크립트가 몇 가지 불행한 구멍을 가지고 있다는 것을 알아채지 못했을 수도 있습니다. 수 많은 이러한 것들이 최근에 채워지고 있습니다.
많은 자바스크립트 라이브러리가 더 쉽게 액세스 할 수 있도록 DOM을 캐시 할 때가 있었습니다. 그들은 DOM을 'Traversing'하여 문서의 모든 노드를 크롤링하는 멋진 방법으로 이를 수행했습니다.

어려워 보이지만 재귀로 인해 훨씬 쉬워졌습니다.

이것은 그 기능의 예입니다 :

function Traverse(ele, callback) {
  callback(ele);
  ele = ele.firstChild;
  while (ele) {
    Traverse(ele, callback);
    ele = ele.nextSibling;
  }
}

실제로 JQuery는 문서의 맨 아래에서 위로 이동하지만 여전히 유사한 방법을 사용합니다. 또한 'selector'로 지정된 노드와 관련하여 찾는 데 사용됩니다.

예를 들어 :

function TraverseUp(ele, callback) {
  callback(ele);
  ele = ele.parentNode;
  while (ele) {
    TraverseUp(ele, callback);
    ele = ele.prevSibling;
  }
}
TraverseUp(document.getElementById('outer'), (ele) => console.log(ele));

이것이 재귀와 관련하여 적어도 약간의 깨달음이 있었기를 바랍니다.
나는 당신이 생각하는 것보다 이해하기가 더 쉽다는 것을 알았을 거라고 확신합니다.
그리고 나는 당신에게 비밀을 털어놓을 수 있습니다. 거의 모든 지식은 처음에 보이는 것보다 파악하기가 더 쉽습니다. 자세한 내용을 보려면 아래 리소스를 확인하십시오!

해석한 링크 : https://medium.com/@zfrisch/understanding-recursion-in-javascript-992e96449e03