Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<div class="container-fluid">
  
  <div class="row" id="page_title">
    <h1>An Introduction to Recursion in JavaScript</h1>
  </div>
  
  <div class="row">
  
  <div class="col-md-3 col-sm-3 col-xs-12">
    <nav class="fixed-left sticky-top sticky-offset" id="navbar">
      <header class="navbar-header"> Recursive Functions </header> 
      <a href="#What_Is_Recursion?" class="nav-link">What Is Recursion?</a>
      <a href="#When_To_Use_Recursion" class="nav-link">When To Use Recursion</a>
      <a href="#Determining_The_Base_Case" class="nav-link">Determining The Base Case</a>
      <a href="#Adding_Recursion" class="nav-link">Adding Recursion</a>
      <a href="#Infinite_Loops_And_Other_Pitfalls" class="nav-link">Infinite Loops And Other Pitfalls</a>
      <a href="#Further_Reading_And_Resources" class="nav-link">Further Reading And Resources</a>
    </nav>
  </div>
  
  <div class="col-md-9 col-sm-9 col-xs-12">
    
  <main id="main-doc"> 
  
    <section class="main-section" id="What_Is_Recursion?">
      <header class="main-header"><a name="What_Is_Recursion?"> What Is Recursion?</a></header>
            <p> "To understand recursion, you just have to understand recursion..."</p>
      <p>Recursion is the process of taking a problem and breaking it into smaller instances of the same problem.   Once you solve the smallest instance of the problem, you can apply that same solution to all the other "levels" of the problem.</p>  
      <p>Programmers often use recursion by creating a function that calls itself.  This can be an elegant way of dealing with a problem, as it can make the code shorter and more readable than trying to create a series of loops.  </p>
    </section>
    
     <section class="main-section" id="When_To_Use_Recursion">
       <header class="main-header"><a name="When_To_Use_Recursion" >When To Use Recursion</a></header>
             <p>
       <div class="text-center">
<img src = "https://res.cloudinary.com/dbqif3psf/image/upload/v1532543719/koch-II_jg7cos.svg" id="image" alt="Koch snowflakes">
   <h6 id="img-caption">
     <i>Koch snowflakes, a visual example of recursion</i>
   </h6>
      </div></p>
    <p> Recursion is often used when a problem can be solved by applying the same process to different elements or variables, for example: </p>
    <p><ul>
      <li>Computing <a href="https://medium.com/developers-writing/fibonacci-sequence-algorithm-in-javascript-b253dc7e320e" target="_blank">Fibonacci numbers</a> (repeatedly adding a number in a series plus the number immediately before it in the series)</li>
      <li>Finding the <a href="https://www.w3resource.com/javascript-exercises/javascript-recursion-function-exercise-1.php" target="_blank">factorial</a> of a number (multiplying a number by all numbers less than itself)</li>
      <li>Testing a word to see if it's a palindrome (starting with one letter, adding letters one by one, and checking whether the string reads the same backwards and forwards)</li>
      <li>Finding all the files in a directory and do something to them, like changing their name</li>
      <li>Putting an array in order using a <a href="https://en.wikipedia.org/wiki/Quicksort" target="_blank">quicksort algorithm </a></li>
      <li>Creating <a href="https://makezine.com/2011/05/11/codebox-explore-recursion-with-processing/" target="_blank"> interesting visual effects</a></li>
    </ul>
    </p>
     </section> 
  
     <section class="main-section" id="Determining_The_Base_Case">
       <header class="main-header"> <a name="Determining_The_Base_Case">Determining The Base Case</a></header>
       <p>The base case is the point at which the program stops running and returns an answer.  Some describe it as the answer to your problem at the simplest level.</p>
       <p>Let's look at a simple countdown function that prints numbers from 10 to 0 in decreasing order.  Here, the lowest "level" is 0, so this becomes the base case. </p>
       <code> <pre>
        function countdown(number) {
            if (number == 0) {
                console.log("0");
            }</pre></code>
       <p> Note, this code is incomplete -- we still need to add recursion so it will complete the countdown.</p>
     </section>
    
     <section class="main-section" id="Adding_Recursion">
       <header class="main-header"> <a name="Adding_Recursion">Adding Recursion</a></header>
       
       <p> If you've chosen your base case correctly, you can add one process that can be repeated until you get down to that base case.  Our simple countdown function can be completed by calling the <code>countdown(number)</code> function within itself: </p>
<p><code><pre>
        function countdown(number) {
            if (number == 0) {
                console.log("0");
            } else {
                console.log(number);
                countdown(number-1);
        }
        countdown(10):</pre></code></p>
       <p> Running <code>countdown(10)</code> gives the countdown from 10 in reverse order.</p>        
       <p> The function can be further simplified like this.  Note how the base case <code>(n == 0)</code> is not shown explicitly, but implied by <code> if n >= 1</code>:</p>
       <p>
         <code><pre>
        function countDown(n) {
            console.log(n);
            if(n >= 1) {
                countDown(n-1);
       }
       countDown(10);</code></pre></p>
     </section> 
    
     <section class="main-section" id="Infinite_Loops_And_Other_Pitfalls">
       <header class="main-header"> 
         <a name="topic6">Infinite Loops And Other Pitfalls</a>      
       </header>
       <p> You'll want to make sure your code doesn't include anything that could throw the program into an infinite loop.  Here's an example of what NOT to do (<i>do not run this code</i>):</p>
       <code> <pre>
       
       function infiniteLoop() {
           infiniteLoop()
       }
       infiniteLoop()</pre></code>       
     <p> Recursion can also take up large amounts of memory very quickly.  Consider <a href="https://medium.com/developers-writing/fibonacci-sequence-algorithm-in-javascript-b253dc7e320e" target="_blank">memoizing</a> or other ways of optimizing the code, or else it may slow down and give errors on larger inputs. </p>
     </section> 
    
     <section class="main-section" id="Further_Reading_And_Resources">
       <header class="main-header"> <a name="topic8">Further Reading And Resources</a></header>
       <p>  
       <ul>
         <li>Wikipedia <a href="https://en.wikipedia.org/wiki/Recursion" target="_blank">definition and examples</a> of recursion</li>
         <li>FreeCodeCamp video: <a href="https://www.youtube.com/watch?v=vPEJSJMg4jY" target="_blank">Recursion in software development</a></li>
         <li> Article on <a href="https://www.thecodingdelight.com/understanding-recursion-javascript/" target="_blank">Understanding Recursion in JavaScript With Confidence</a> </li> 
           <li> Read more about the countdown function example in <a href="https://medium.com/@zfrisch/understanding-recursion-in-javascript-992e96449e03" target="_blank">this Medium article </a></li>
         <li> Recursion is discussed in the Mozilla documentation on <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions" target="_blank">Functions</a></li>
         <li>A mathematician's view of <a href="http://www.mi.sanu.ac.rs/vismath/bridges2005/burns/index.html" target="_blank">Recursion in Nature, Mathematics, and Art</a></li>
       </ul>
       </p>
     </section> 
  
      </main>
    </div> <!--end of col-9-->
  </div><!--end of row housing col-3(navbar) and col-9(main content)-->
    
</div> <!--end of container-fluid div-->
              
            
!

CSS

              
                #page_title {
  padding-top: 40px;
  padding-bottom: 20px;
  justify-content: center; 
}

.navbar-header {
  text-align: center;
}

.nav-link {
  background-color: #003957;
  color: white;
  font-weight: bold;
  margin-top: 10px;
  text-align: center;
  border-radius: 5px;
}

.nav-link:hover {
  background-color: #ccdae1;
  color: black;
  /*outline: solid 3px #003957;*/
  box-shadow: 0 0 0 3px #003957;
}

main {
  padding-top: 20px;
  padding-bottom: 40px;
}

.main-header {
  background-color: #ccdae1;
  padding: 10px;
}

section {
  margin-top: 15px;
  padding-bottom: 10px;
  border: solid 3px #003957;
  border-radius: 5px;
}

.col-3 {
  padding-top: 40px;
}

header { /*this is for section headers, where it says "Section _ Topic" */
  font-weight: bold;
}

p {
  margin: 0px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
}

ul {
  margin-bottom: 0;
}

code {
  color: black;
  font-weight: bold;
}

pre {
  margin-top: 10px;
  font-size: 14px; 
  font-weight: bold;
}

#image {
  width: 60%;
  text-align: center;
}

@media (max-width: 682px) {
  #page_title {
    text-align: center;
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console