Função recursiva retornando undefined | JavaScript | Alura

Eu estava tentando criar uma pagina que gera codigos hex aleatorios para o background da pagina, eu tentei utilizar uma função recursiva para criar esse codigo hex mas estou tendo alguns problemas, se eu tento retornar o codigo ao final da recursão a função me retorna um undefined, porém o console.log mostra a string certinha, só funciona o codigo quando eu coloco que hexcolor=hexcode e apago o hexcolor = no começo do EventListener . Alguém saberia me dizer porque a função retorna undefined?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>
      Color Flipper || Simple
    </title>

    <!-- styles -->
    <link rel="stylesheet" href="css/styles.css" />
  </head>

  <body>
    <nav>
      <div class="nav-center">
        <h4>color flipper</h4>
        <ul class="nav-links">
          <li><a href="index.html">simple</a></li>
          <li><a href="hex.html">hex</a></li>
        </ul>
      </div>
    </nav>
    <main>
      <div class="container">
        <h2>background color : <span class="color">#f1f5f8</span></h2>
        <button class="btn btn-hero" id="btn">click me</button>
      </div>
    </main>
    <!-- javascript -->
    <script src="js/hex.js"></script>
  </body>
</html>

const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];

const btn = document.querySelector('#btn');
const color = document.querySelector('.color');
var contador = 0;
let hexcolor = '';

btn.addEventListener('click', function(event){
    hexcolor = randomCaracters('#');
    console.log(hexcolor);
    color.textContent = hexcolor;
    document.body.style.backgroundColor = hexcolor;
    hexcolor='';
    contador = 0;
});

function randomCaracters(hexcode){
    if(contador > 5){
        //hexcolor=hexcode;
        console.log(hexcode);
        console.log(contador);
        return hexcode;
    } else {
        contador++;
        console.log(hexcode);
        randomCaracters(hexcode + hex[Math.floor(Math.random() * hex.length)]);
    }
}

Olá Ighor, tudo bem?

Para resolver esse problema basta adicionar o comando return à chamada interna da função randomCaracters conforme abaixo:

...
else {
        contador++;
        console.log(hexcode);
        return randomCaracters(hexcode + hex[Math.floor(Math.random() * hex.length)]);
    }
...

Quando chamamos a função randomCaracters pela primeira vez, o else será acionado pois contador ainda não é maior que 5. Em seguida, chamamos recursivamente a função randomCaracters sem retornar o valor que ela irá produzir ao longo da recursividade (valor que será retornado completo quando contador for maior que 5). Sem o comando return o valor produzido se perde e undefined é retornado. Com o comando return presente, garantimos que o valor gerado será retornado ao final de todo o processamento destas chamadas recursivas.

Espero ter ajudado,

Att.