Dúvida sobre colocar os dados no html usando o map e join

Então, depois do professor usar o map nas negociacoes e retornar tudo em template string , ele usa o join() para transformar tudo em string, já que o innerHTML só trabalha com string. ( me refiro à aula Construindo um template dinâmico com a função map )

A questão é, aqui no meu projeto funciona mesmo sem o join() no fim, porém, quando adiciono mais de uma negociacao, uma vírgula aparece em cima da tabela ( inclusive essa mesma vírgula aparece mesmo se eu apenas der um log de n). Vale dizer que se eu uso o join(), essa vírgula desaparece. Porque isso acontece?

Eis meu código :

_template(model){

        return `
        <table class="table table-hover table-bordered">
            <thead>
            <tr>
                <th>DATA</th>
                <th>QUANTIDADE</th>
                <th>VALOR</th>
                <th>VOLUME</th>
            </tr>
            </thead>

            <tbody class="table-body">
                ${model.negociacoes.map(n =>{
                    console.log(n);
                })}
            </tbody>

            <tfoot></tfoot>
        </table>
        `
    }

Eis meu código retornando os valores de n :

_template(model){

        return `
        <table class="table table-hover table-bordered">
            <thead>
            <tr>
                <th>DATA</th>
                <th>QUANTIDADE</th>
                <th>VALOR</th>
                <th>VOLUME</th>
            </tr>
            </thead>

            <tbody class="table-body">
                ${model.negociacoes.map(n =>{
                    return `
                        <tr>
                            <td>${DateHelper.dateToText(n.data)}</td>
                            <td>${n.quantidade}</td>
                            <td>${n.valor}</td>
                            <td>${n.volume}</td>
                        </tr>
                    `
                })}
            </tbody>

            <tfoot></tfoot>
        </table>
        `
    }