I recently attended an interview for a Frontend Engineer Position and I completely blanked out during the live coding challenge because I didn’t know what concept to use to approach the problem. Well, if I had understood what I will be detailing in this article beforehand, the interview might have gone a different way. I am going to be solving the challenge using a basic JavaScript concept I learned recently- Recursion.
The Challenge
- Recreate the native JavaScript
setIntervalfunction without using the function itself.
After the interviewer walked me through what I needed to do, I was given 30 minutes to solve the challenge, but I spent the first 15 minutes staying extremely confused as I thought of several approaches to use. I had two problems to tackle:
- How to appropriate delay in between a functions’ repeated executions.
- How to call the function persistently.
I thought of using a loop, but it was a bad idea as I made it infinite without solving the problem, leaving me to reset the page twice! To give a bit of a refresher on what the setInterval function does, it executes a function expression repeatedly at specified intervals. The repeated execution can only be terminated using a clearInterval function, which is also a native Javascript function.
The Syntax
setInterval(function, interval)
Parameters
function- code statements to be executedinterval- time in milliseconds (1000ms to 1s)
Demo Code
setInterval(function(){ console.log("Recursive!")}, 3000)
This code above will log to the console “Recursive!” every 3 seconds.
How The Challenge Can Be Solved
To solve the problems listed above:
1. Delay
The setTimeout function can be used to set a delay. The difference between the setInterval and setTimeout function is, while setInterval executes a function persistently in-between a specified interval,setTimeout executes a function only once after a specified time in milliseconds has elapsed. One can think of setTimeout as a delay setter.
The Syntax
setTimeout(function, timeout)
Parameters
function- code statements to be executedtimeout- time in milliseconds (1000ms to 1s)
Demo Code
function delayRecursive(){
console.log(“Recursive!”)
}
/*this will log Recursive! to the console only after 3 seconds.*/
setTimeout(delayRecursive, 3000)
2. Persistent Execution Calls
A common way of iterating statements is using a loop, nonetheless, there is a concept called Recursion in JavaScript that can be used to replace loops. A recursive function is a function expressed in terms of itself, this means the function calls itself during execution. Take a look at two versions of some code statements below.
They both add consecutive numbers from 1 to 3 and log the sum to the console. A condition is set to prevent an infinite addition of numbers in both cases. Observe the code carefully and see the explanation below it, describing what each line is doing.
For Loop
1 function add(n){
2
3 var sum = 0;
4
5 for(var i = 1; i <= n; i++){
6 sum += i;
7 }
8
9 console.log(sum)
10 }
11
12 add(3)
For Loop Explanation
line 12:
add(3) is called and executed
line 3: initialize sum to 0
sum = 0;
line 5:
run an iteration when (1 or 2 or 3) is less than or equal to 3
line 6:
sum = sum + i
- first iteration
i = 1
sum = 0 + 1 = 1;
- second interation
i = 2
sum = 1 + 2 = 3;
- third iteration
i = 3
sum = 3 + 3 = 6;
line 9:
logs the sum to the console = 6
Recursion
1 function sumRecursion(x, n){
2 if(x == n){
3 return x;
4 }else{
5 return x + sumRecursion(x + 1, n)
6 }
7 }
8
9 console.log(sumRecursion(1, 3))
Recursion Explanation
line 2:
where x = 1 or 2 or 3
if (1 or 2 or 3) is equal to 3, return the number 3
line 4:
immediately starts its iteration
the condition on line 2 is false on the first and second iteration
- first iteration
sumRecursion(1,3) returns the number 1
x = 1, n = 3
line 5:
returns the sum of 1 and (sumRecursion((1 + 1), 3)- calls
itself with an increment of x)
- second iteration
sumRecursion(1 + 1, 3) returns the number 2
x = 2, n = 3
line 5:
returns the sum of (1 + 2) + (sumRecursion((2 + 1), 3)) -calls
itself with an increment of x
- third iteration
sumRecursion(2 + 1, 3) returns the number 3
x = 3, n = 3
line 5:
on line 2, the condition is true
returns the sum of (1 + 2 + 3)
line 9:
logs the sum to the console = 6
Code Solution To The Challenge
The concept of recursion might seem a little hard to grasp at first, but once it starts to make sense, it becomes easy to apply its logic. Seeing how recursion works, the solution to the challenge is only less than six lines.
1 function loop(){
2 console.log("Recursive!")
3 setTimeout(loop,2000);
4 }
5 loop()
Explanation
line 5:
loop() is called and executed
line 2:
"Recursive!" is displayed on the console the first time
line 3:
setTimeout() will delay for 2s, then call loop() again
line 2 displays "Recursive!" again, and the loop continues
The function calls itself and creates a loop. However, in this case, I did not set a condition, and as a result, the function will run infinitely. This instance should be put into consideration when programming with this kind of logic.
Conclusion
Recursion can enable a programmer to write cleaner and elegant code, however, there is also the possibility of causing a memory leak. Additionally, in situations where conditions are not written to handle certain use cases, it may cause an infinite loop and result in a crashed/unresponsive program. To read up more on recursion, check out JavaScript Info.
If you have any questions, please feel free to comment below 😊