Desculpe, vi que já havia o mesmo tópico mas ainda não entendi o uso do join.
Além disso, segundo a resposta da dúvida que já haviam postado, há vírgulas na página quando não se usa o join, porém não as encontrei.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Desculpe, vi que já havia o mesmo tópico mas ainda não entendi o uso do join.
Além disso, segundo a resposta da dúvida que já haviam postado, há vírgulas na página quando não se usa o join, porém não as encontrei.
O join "junta" elementos de um array e converte para uma string, opcionalmente pode-se passar um separador, ex:
var linguagens = ['php', 'ruby', 'python', 'js'];
linguagens.join(); // 'php,ruby,python,js'
linguagens.join(' | '); // 'php | ruby | python | js'Ajudou ou complicou mais? hehe
Olá, Emerson.
Não precisa pedir desculpa man, se está com um dúvida tem que perguntar mesmo.
O join é um método que temos disponível no Array do JavaScript. Como ele funciona?
Criarei um exemplo próximo do construído pelo Flávio durante o curso. Temos um Array com 4 posições em cada posição nós temos uma <li>:
const lis = ['<li>Primeira</li>', '<li>Segunda</li>', '<li>Terceira</li>']Agora o nosso objetivo é pegar cada posição e junta-los em uma String. Para fazermos isso podemos utilizar o método join disponível em variáveis que guardam uma estrutura Array. Vamos ver como fica o código com o e em seguida te explico o que aconteceu:
const lis = ['<li>Primeira</li>', '<li>Segunda</li>', '<li>Terceira</li>']
const todasLisEmTexto = lis.join()Muito bom. Se termos um console.log(todasLisEmTexto) nós veremos a seguinte saída no terminal:
'<li>Primeira</li>, <li>Segunda</li>, <li>Terceira</li>'Agora nós queremos tirar o separador padrão do join que é a vírgula por nada. Felizmente o join recebe como parâmetro o que queremos utilizar como separador, por tanto só precisamos passar uma string vazia que o separador padrão irá sumir:
const lis = ['<li>Primeira</li>', '<li>Segunda</li>', '<li>Terceira</li>']
const todasLisEmTexto = lis.join('')Se executarmos outro console.log(todasLisEmTexto) poderemos visualizar uma saída no terminal sem as vírgulas que tinhas anteriormente:
'<li>Primeira</li><li>Segunda</li><li>Terceira</li>'Agora podemos colocar as três tags <li> que estão dentro da variável todasLisTemTexto dentro de uma tag <ul>:
const lis = ['<li>Primeira</li>', '<li>Segunda</li>', '<li>Terceira</li>']
const todasLisEmTexto = lis.join()
const ul = `<ul>${todasLisEmTexto}</ul>`Por fim, se você der um console.log(ul) verá uma saída pronta para ser adicionada no HTML e exibida de forma legível para o usuário:
'<ul><li>Primeira</li><li>Segunda</li><li>Terceira</li></ul>'Se ficar qualquer dúvida é só perguntar :-)
Desculpa, Leandro ter criado um resposta parecida com a sua. Eu estava escrevendo e você foi mais rápido :-)
Caramba Marco, que explicação top. Valeu mesmo! :D
Que bom que gostou Emerson. Se tiver qualquer outra dúvida não deixe de postar :-)