Pra que o Join? (2)

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 :-)