Recursion in JS

aiman9411 — Mon, 25 Jan 2021 01:09:26 +0000

What is recursion?

Recursion is a process to call itself and function that calls itself is termed as recursive function. (Warning: someone needs to stop it or else it will call itself for infinite time).

Recursive function

In a recursive function, there are two parts that we need to include: base case (a condition that tells the function to stop) and the recursive call. Generally, recursive function is written using if...else statement since we can easily write one branch as recursive call and the other as the base case. ****

function countup(n) {
    // this is the base condition
  if (condition) {
    return xyz;
    // this is the recursive call
  } else {
    return countup(n-1)
  }
}

Let's call the function!

Enough with the explanation and let's try to see how the magic works. Below is the recursive function that returns an array containing the number 1 until n. Also, this function receives an argument, n, representing the final number.

function countup(n) {
  if (n < 1) {
    return [];
  } else {
    const countArray = countup(n - 1);
    countArray.push(n);
    return countArray;
  }
}
console.log(countup(5)); // [ 1, 2, 3, 4, 5 ]

How does it work? The answer is it will need to call itself with progressively smaller values until it reaches 1.

// This is how it works
countup(5)
    countup(5-1)
        countup(4-1)
            countup(3-1)
                countup(2-1)
                    countup(1-1) // this will be evaluated to (n < 1) and function will return []
                                             // then function will push n of every stage into the empty array

Pop Quiz Time!

To ensure we understand the concept, let's try to answer these two questions. (Another warning: I named the function with ambiguous names as xyz and abc because it's pop quiz time. If not, then I will name it based on what it does.)

Question 1: What is the result when we call xyz function?

function xyz(n) {
  if (n < 1) {
    return [];
  } else {
    const countArray = xyz(n - 1);
    countArray.unshift(n);
    return countArray;
  }
}

console.log(xyz(5)

Question 2: What is the result when we call opq function?

function opq(startNum, endNum) {
  if (endNum - startNum === 0) {
    return [startNum];
  } else {
    var numbers = opq(startNum, endNum - 1);
    numbers.push(endNum);
    return numbers;
  }
}

console.log(opq(1,5));

Question 3: What will happen when we call cde function?

function xyz(n) {
  if (n < 1) {
    return [];
  } else {
    const countArray = xyz(n + 1);
    countArray.unshift(n);
    return countArray;
  }
}

console.log(xyz(3))

Clue for Question 3:

Active recall session

I have prepared some questions so that we can recall the concept together. If you revisit this note next time, then you might just want to skip the explanation part and head straight to these questions.

What is recursion?
How many parts generally we include in a recursive function?
What will happen if we failed to include base condition in the function?

Last but not least...

I hope you enjoyed and benefited from this note. If you find this note is not helpful, then keep on googling and adding comments to your own note. All the best!

Answer for pop quiz questions

It's a countdown function. Result should be [ 5, 4, 3, 2, 1]
It's a range of number function. Result should be [ 1, 2, 3, 4, 5]
Result is "RangeError: Maximum call stack size exceeded". This is because we coded it as (n+1) instead of (n-1). Hence, it will never stop.

Function Declaration Vs Function Expression in JS

aiman9411 — Mon, 30 Nov 2020 15:06:43 +0000

I stumbled upon this question when learning JavaScript the other day, so I did some reading to understand the differences between those two types of function. I will try to summarise few points that I gathered based on my reading.

Intro to Function Declaration

// Example of Function Declaration 
function multiplyNum(firstNum, secondNum) {
    return firstNum * secondNum;
}

Function declaration declares a function and will be invoked once we call the function. Also, we need to define it using function keyword, followed by name and parentheses {}.

Intro to Function Expression

// Example of Function Expression 
var multiplyNum =  function(firstNum, secondNum) {
    return firstNum * secondNum;
}

Function expression is basically a JavaScript function that is stored in a variable. In the example above, we do not write the function using function keyword first, instead we write it as if we define a variable.

Hoisting

This is subtle yet an important difference between those two functions. When we run the JavaScript file, function declaration will be hoisted to the top of the code before any code is executed. In other words, functions written as function declarations are known before the code is run.

// We can call the function before we declare it
console.log(multiplyNum(1,3))

// Example of Function Declaration 
function multiplyNum(firstNum, secondNum) {
    return firstNum * secondNum;
}
//3

On the other hand, functions written as function expressions are not hoisted when we run the script. An example is when we run the code below, we will encounter an error instead of the value 3.

// When we call the function before we declare it
console.log(addNum(1,4))

// Example of Function Declaration 
var addNum = function(firstNum, secondNum) {
    return firstNum + secondNum;
}
// We will get error message instead of the value 5.

Which One Should We Use?

The answer is it is a matter of personal preference. If you want to call a function before we declare it, then obviously function declaration is the best option. If you want to have a better structure, then you might consider function expression as the answer.

All in all, happy coding and I hope that you have learned something from this post. Cheers!

DEV Community: aiman9411