I need help to understand recursion

Tell us what’s happening:
Hi, it’s my first post on this forum so welcome everyone!
Im having trouble understanding recursion like every beginner programmer i guess.
I was looking through forum and some youtube videos but i just cant understand one part of my code.
In first example everything is clear for me, return countDown(i - 1); calls function again but with argument i - 1 so its working exactly like for loop with decrementation. But in second example what exactly this part of code does return sum(arr, n - 1) + arr[n];? Its decrementing n value but then what does + arr[n] mean? In my logic if i want to add vallues of array[n] i would do for example another variable called summ and do it like this:

let summ = 0;
function sum(arr, n) {
summ += arr[n];
if (n <= 0) {
return arr[0];
}else{
return sum(arr, n - 1);
}
}

sum([5,4,3,2,1], 5);
console.log(summ);

I hope i wrote everything pretty clear so you can understand it, back to my question: Can someone please, explain to me what does + arr[n] in this code do?

Your code so far


function countDown(i){
  if(i === 0){
    console.log(i);
    return 0;
  }else{
    console.log(i);
    return countDown(i - 1);
  }
}
countDown(8);

function sum(arr, n) {
  if (n <= 0) {
    return arr[0];
  } else {
    console.log(arr[n]);
    return sum(arr, n - 1) + arr[n];
  }
}
sum([5,4,3,2,1], 5)



**Your browser information:**

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

**Challenge:** Replace Loops using Recursion

**Link to the challenge:**
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/replace-loops-using-recursion#

Your code contains global variables that are changed each time the function is run. This means that after each test completes, subsequent tests start with the previous value. To fix this, make sure your function doesn’t change any global variables, and declare/assign variables within the function if they need to be changed.

Example:

var myGlobal = [1];
function returnGlobal(arg) {
  myGlobal.push(arg);
  return myGlobal;
} // unreliable - array gets longer each time the function is run

function returnLocal(arg) {
  var myLocal = [1];
  myLocal.push(arg);
  return myLocal;
} // reliable - always returns an array of length 2

and what’s the returned value from the sum function?

Maybe i need to ask my question in diffrent way. In my example function did not return correct value but it saved correct value to variable summ so its understendable for me.

let summ = 0;
function sum(arr, n) {
summ += arr[n];
if (n <= 0) {
return arr[0];
}else{
return sum(arr, n - 1);
}
}
sum([5,4,3,2,1], 2);
console.log(summ);

function sume(arr, n) {
  if (n <= 0) {
    return arr[0];
  } else {
    return sume(arr, n - 1) + arr[n];
  }
}
console.log(sume([5,4,3,2,1], 2));

Both of them gives me same value but one is stored in variable summ and in second one function returned correct value. But i cant understand why it returned that value. I think i cant understand that because of this part: + arr[n]. Cause when im thinking about it i have to store somewhere each decrementation value and add it but in second example im like not storing it anywhere.

when this line start executing for the first time, the sum doesn’t happen because it needs to wait for the output of the function

that function has a line like that inside and the same thing will happen

until, eventually, n becomes 0 and this line is executed:

so arr[0] is returned
the function in which n is 1 can finally have an output as now its line become
return arr[0] + arr[1]

and so on till the function called first can have finally a returned value