Recursion Replacement explainer


The aim of this puzzle: Complete the recursive updateAllNames function.

Walkthrough of the solution: The updateAllNames function definition isn’t correct. It only replaces the 1st typo which is the same thing the regular .replace() method does. We need to make the function replace all the typos (spelling errors).

The 1st part of the function is an If Statement that checks if the string does not include any typos. This is the same as asking if all the typos are gone. If there are no typos, then we should just return the string because all the work is done. If that check fails, then we still have typos to fix.

The next line does a .replace() to fix the first typo it finds. Now our string is a little better off, because it has 1 less typo. But there may still be typos left. We should do something to check if we’re done or if there are any more typos to fix. Amazingly, we have a function that already checks if the string is free of typos otherwise it fixes 1 typo – the updateAllNames function that we’re looking at!

After we did our .replace() we should call the updateAllNames() function and return that value: return updateAllNames(string, oldPart, newPart); This almost like a loop, because when we run updateAllNames() the very 1st time, it will probably ask itself to run again, and again. But the important part is that each time the function is called, there is a check right away to see if the work is done. That’s called a “base case”, this is the case that we don’t need to recurse (make the function call itself) anymore.

Also, every time we recurse, we’re getting closer to the base case (no typos), because we’re removing 1 typo every time. Eventually, we will get rid of all the typos and the recursion is complete.

Sample code solution:
(Tap below to reveal)

function updateAllNames(string, oldPart, newPart) {
  if (string.includes(oldPart) === false) {
    return string;
  string = string.replace(oldPart, newPart);
  return updateAllNames(string, oldPart, newPart);
console.log(updateAllNames(travelDocument, 'grasshoper', 'grasshopper'));

JavaScript Concepts: Code Block (function, if statement), console.log(), Recursion, .replace()


There’s a typo :wink: replace ‘becuase’ by ‘because’


Can someone explain why an if…else isn’t used? When the code hits the first return, does it just return that thing? Why doesn’t the second return here make it go on forever?


Hey there, this code would work with an if…else, but it also works equally as well with just a regular if statement.

Recursive functions need an exit condition to make sure they don’t run forever. That’s what this if statement is doing:

if (string.includes(oldPart) === false) {
  return string;

If there are no more typos left to replace, then string.includes(oldPart) === false will be true, and the code inside the if statement will run. This return statement will only run if there are no more typos to fix. Once a return statement is executed, a function stops running, so none of the code will run.

If there are still typos to fix, then the code inside the if statement will not run. The function will instead fix 1 typo, and then call itself again.

Once there are no more typos, the if statement will be able to run the return string, and the function will stop running.

– Ben