Creo que todas estas dudas se pueden aclarar a la vez, explicando bien cómo funciona la recursividad. Por tanto, expliquemos los conceptos básicos:
Una función recursiva es aquella que se llama a sí misma. Dejemos la recursividad indirecta a un lado (la función A llama a la función B, que a su vez vuelve a llamar a A) para simplificar.
Una función recursiva debe tener 2 casos bien diferenciados:
El caso base, que es el caso trivial en el que la recursividad no se usa. Por ejemplo, si queremos sumar todos los elementos de un array, el caso base es cuando el array está vacío. En ese caso devolvemos 0 y la ejecución acaba ahí.
El caso recursivo, que es el caso no trivial. En este caso lo que se hace es descomponer el problema a resolver en problemas más pequeños. Una vez los problemas más pequeños se han solucionado, el problema original se resuelve con la unión de todas las soluciones, ya sea sumando, concatenando, multiplicando... etc.
Una vez entendemos los casos, podemos pasar a diseñar una solución a nuestro problema. Pongamos por ejemplo el caso de sumar todos los elementos de un array:
var ejemplo=[1,2,3,4,5,6,7,8,9,10];
El caso base sería cuando queremos sumar los elementos de un array vacío:
var ejemplo2=[];
En ese caso el valor resultante es cero, así pues pongamos eso en nuestra función:
function sumaArray(array) {
//caso base
if (array.length===0) {
return 0;
}
//caso recursivo
//... por definir
}
Entonces tenemos el caso recursivo: Si tenemos un array con N elementos donde N es mayor que 0, tomemos el primer elemento. Entonces tenemos por un lado un elemento E y por otro un array con N-1 elementos. Acabamos de reducir el problema, pasando de N a N-1. Por tanto, el resultado sería sumar el E más la suma del resto de elementos. Añadamos el caso recursivo a nuestra función y probémosla:
function sumaArray(array) {
//caso base
if (array.length===0) {
console.log('sumArray() da 0');
return 0;
}
const e=array[0];
const arrayConUnElementoMenos=array.slice(1); //devuelve el array menos el primer elemento
console.log(`Devuelvo la suma de ${e} y el resultado de sumArray(${arrayConUnElementoMenos})`);
return e + sumaArray(arrayConUnElementoMenos);
}
console.log(sumaArray([1,2,3,4]));
Si, como en tu primer ejemplo, en lugar de devolver e + sumaArray(arrayConUnElementoMenos);
hubiésemos devuelto simplemente sumaArray(arrayConUnElementoMenos);
, no estaríamos acumulando nada, simplemente se devolvería el caso base (0) olvidando los resultados intermedios.
Quizá tu segundo ejemplo es complicado de entender por la notación usada:
const [first, ...rest] = nums;
Esta línea es equivalente a lo que he puesto en mi ejemplo:
const first=nums[0]; //primer elemento del array nums
const rest=nums.slice(1); // resto de elementos del array
Y tu último ejemplo falla en que estás sumando un array a un número. Javascript, cuando intentas sumar tipos de datos que no son compatibles, lo que hace es transformar ambos tipos a texto (strings) y concatenarlos:
var array = [2,4,6,8];
var numero= 0;
var texto= 'hola';
var objeto={};
console.log(array + numero);
console.log(array+texto);
console.log(objeto + array);