Recursion Function in JavaScript - Functional Programming in JavaScript

Name

Jobayer Hossain

Twitter

@Jobayer977

In this article, we will learn about recursion function in JavaScript. We will learn what recursion function is and how to use it in JavaScript.

What is Recursion Function?

Recursion is a programming concept in which a function calls itself in its

Why Should We Use Recursion Function?

• Simplifies complex problems
• Reduce code duplication

Understanding the concept of Recursion

Imageing we have a list of items in our shopping bag. Now we want to look for chocolate. How can we do that? We can take single item from the bag and check if it is chocolate. If it is chocolate, we will take it. If it is not chocolate, we will put it somewhere else. Then we will take another item from the bag and check if it is chocolate. We will repeat this process until we find chocolate. this is exactly how recursion works.

Now let's see how we can implement this in sudo code.

FUNCTION lookForChocolate(bag)
    IF bag is empty
        RETURN "Chocolate not found"
 
    SET item to last element of bag
    REMOVE last element from bag
 
    IF item is equal to 'chocolate'
        RETURN "Yes, chocolate found"
 
    RETURN lookForChocolate(bag)

Here we have a function called lookForChocolate which takes a bag as an argument. And we first check if the bag is empty. If the bag is empty, we will return a message saying "Chocolate not found". If the bag is not empty, we will take the last item from the bag and remove it from the bag. Then we will check if the item is chocolate. If the item is chocolate, we will return a message saying "Yes, chocolate found". If the item is not chocolate, we will call the lookForChocolate function again with the remaining items in the bag. We will repeat this process until we find chocolate or the bag is empty.

Now let's see how we can implement this in JavaScript.

function lookForChocolate(bag) {
  if (bag.length === 0) {
    return "Chocolate not found";
  }
 
  const item = bag[bag.length - 1]
  bag.pop()
 
  if (item === 'chocolate'){
    return "Yes, chocolate found"
  }
 
  return lookForChocolate(bag)
}

You can see in javascript we created a function called lookForChocolate which takes a bag as an argument. and we have use if statement to check if the bag is empty. If the bag is empty, we will return a message saying "Chocolate not found". If the bag is not empty, we will take the last item from the bag using bag[bag.length - 1] and remove it from the bag using bag.pop(). Then we will check if the item is chocolate. If the item is chocolate, we will return a message saying "Yes, chocolate found". If the item is not chocolate, we will call the lookForChocolate function again with the remaining items in the bag using return lookForChocolate(bag). We will repeat this process until we find chocolate or the bag is empty.

How it executes?

In browser, when we call a function, it creates a new execution context. And when we call a function inside a function, it creates a new execution context inside the previous execution context. And this process continues until we find chocolate or the bag is empty. When we find chocolate or the bag is empty, the execution context is removed from the call stack. And the process continues until the call stack is empty.

Conclusion

So this is how we can use recursion function in JavaScript. Recursion is a very powerful concept in programming. It can simplify complex problems and reduce code duplication. But we need to be careful when using recursion. Because if we don't use it properly, it can cause infinite loop which can crash our application. So we need to be careful when using recursion.