I don´t understand the change from a for loop to a recursive function

Tell us what’s happening:
I don´t undestand why it changes from this:

function multiply(arr, n) {
    var product = 1;
    for (var i = 0; i < n; i++) {
        product *= arr[i];
    return product;

to this:

 function multiply(arr, n) {
    if (n <= 0) {
      return 1;
    } else {
      return multiply(arr, n - 1) * arr[n - 1];

Your code so far

function sum(arr, n) {
// Only change code below this line

// Only change code above this line

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36.

Challenge: Replace Loops using Recursion

Link to the challenge:

Hello there.

This topic was discussed at length over here: Replace Loops using Recursion -1 explanation

Hope this helps

is it the general why, as in why the shell we do this if the first version of it works so well?

or is it a why do they do the same

for the latter, @Sky020 gave a good link with many explanations but if it is not enough, ask again

for the former, it is a way to present recursion, to show an alternative why. It could have been presented in many ways. This was the one chosen in the curriculum

Thank you so much my friend i will see today and i hope i understand