Как работает стек вызова функций при рекурсии?

Рассмотрим второй пример, строку

console.log(sum(arr));

Что выдаст лог? Конечно, результат работы функции sum(arr)

А что делает функция sum(arr)

const sum = mas => {
    if(i < mas.length){      // <-- i == 0, проваливаемся в if
        result += mas[i];    // <-- прибавили к result i-ый элемент массива
        i++;                 // <-- увеличили i
        sum(mas);            // <-- запустили рекурсивно функцию
        console.log(result); // <-- залогировали result и...
                             // <-- ...ничего не вернули
    } else {
        return result;       // <-- это не выполнится, так как зашли в if
    }
}

В JavaScript функция всегда возвращает результат. Если не указать return функция вернет undefined.

Этот undefined и выводит console.log(sum(arr));

В третьем примере функция sum(arr) вернет результат

const sum = mas => {
    if(i < mas.length){
        result += mas[i];
        i++;
        sum(mas);
        console.log(result); // <-- выполнение функции не закончено
    }
    return result;           // <-- нужно еще выполнить эту строку, вернуть `result`
}