6078081a3f
* feat: Add guide article and update its challenge * Update guide/english/certifications/javascript-algorithms-and-data-structures/basic-javascript/replace-loops-using-recursion/index.md Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * Update guide/english/certifications/javascript-algorithms-and-data-structures/basic-javascript/replace-loops-using-recursion/index.md Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * Update guide/english/certifications/javascript-algorithms-and-data-structures/basic-javascript/replace-loops-using-recursion/index.md Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * Update guide/english/certifications/javascript-algorithms-and-data-structures/basic-javascript/replace-loops-using-recursion/index.md Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * fix: Stop hints from being hidden * fix: Improve the wording. * Update index.md Fixed per suggestion * Update index.md Fixed per suggestion
109 lines
3.2 KiB
Markdown
109 lines
3.2 KiB
Markdown
---
|
|
id: 5cfa3679138e7d9595b9d9d4
|
|
title: Replace Loops using Recursion
|
|
challengeType: 1
|
|
videoUrl: 'https://www.freecodecamp.org/news/how-recursion-works-explained-with-flowcharts-and-a-video-de61f40cb7f9/'
|
|
---
|
|
|
|
## Description
|
|
<section id='description'>
|
|
Recursion is the concept that a function can be expressed in terms of itself. To help understand this, start by thinking about the following task: multiply the elements from <code>0</code> to <code>n</code> inclusive in an array to create the product of those elements. Using a <code>for</code> loop, you could do this:
|
|
|
|
```js
|
|
function multiply(arr, n) {
|
|
var product = arr[0];
|
|
for (var i = 1; i <= n; i++) {
|
|
product *= arr[i];
|
|
}
|
|
return product;
|
|
}
|
|
```
|
|
|
|
However, notice that <code>multiply(arr, n) == multiply(arr, n - 1) * arr[n]</code>. That means you can rewrite <code>multiply</code> in terms of itself and never need to use a loop.
|
|
|
|
```js
|
|
function multiply(arr, n) {
|
|
if (n <= 0) {
|
|
return arr[0];
|
|
} else {
|
|
return multiply(arr, n - 1) * arr[n];
|
|
}
|
|
}
|
|
```
|
|
|
|
The recursive version of <code>multiply</code> breaks down like this. In the <dfn>base case</dfn>, where <code>n <= 0</code>, it returns the result, <code>arr[0]</code>. For larger values of <code>n</code>, it calls itself, but with <code>n - 1</code>. That function call is evaluated in the same way, calling <code>multiply</code> again until <code>n = 0</code>. At this point, all the functions can return and the original <code>multiply</code> returns the answer.
|
|
|
|
<strong>Note:</strong> Recursive functions must have a base case when they return without calling the function again (in this example, when <code>n <= 0</code>), otherwise they can never finish executing.
|
|
|
|
</section>
|
|
|
|
## Instructions
|
|
<section id='instructions'>
|
|
|
|
Write a recursive function, <code>sum(arr, n)</code>, that returns the sum of the elements from <code>0</code> to <code>n</code> inclusive in an array <code>arr</code>.
|
|
|
|
</section>
|
|
|
|
## Tests
|
|
<section id='tests'>
|
|
|
|
``` yml
|
|
tests:
|
|
- text: <code>sum([1], 0)</code> should equal 1.
|
|
testString: assert.equal(sum([1], 0), 1);
|
|
- text: <code>sum([2, 3, 4], 1)</code> should equal 5.
|
|
testString: assert.equal(sum([2, 3, 4], 1), 5);
|
|
- text: Your code should not rely on any kind of loops (<code>for</code> or <code>while</code> or higher order functions such as <code>forEach</code>, <code>map</code>, <code>filter</code>, or <code>reduce</code>.).
|
|
testString: assert(!removeJSComments(code).match(/for|while|forEach|map|filter|reduce/g));
|
|
- text: You should use recursion to solve this problem.
|
|
testString: assert(removeJSComments(sum.toString()).match(/sum\(.*\).*\{.*sum\(.*\).*\}/s));
|
|
```
|
|
|
|
</section>
|
|
|
|
## Challenge Seed
|
|
<section id='challengeSeed'>
|
|
|
|
<div id='js-seed'>
|
|
|
|
```js
|
|
function sum(arr, n) {
|
|
// Only change code below this line
|
|
|
|
// Only change code above this line
|
|
}
|
|
|
|
```
|
|
|
|
</div>
|
|
|
|
### After Test
|
|
<div id='js-teardown'>
|
|
|
|
```js
|
|
const removeJSComments = str => str.replace(/\/\*[\s\S]*?\*\/|\/\/.*$/gm, '');
|
|
|
|
```
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
## Solution
|
|
<section id='solution'>
|
|
|
|
```js
|
|
function sum(arr, n) {
|
|
// Only change code below this line
|
|
if(n <= 0) {
|
|
return arr[0];
|
|
} else {
|
|
return sum(arr, n - 1) + arr[n];
|
|
}
|
|
// Only change code above this line
|
|
}
|
|
|
|
```
|
|
|
|
</section>
|