7

Estou fazendo um curso de JavaScript e me surgiu uma dúvida em um dos exercícios.

Segue abaixo o exercício:

Dado o seguinte vetor de objetos:

var usuarios = [
  {
    nome: 'Diego',
    habilidades: ['Javascript', 'ReactJS', 'Redux']
  },
  {
    nome: 'Gabriel',
    habilidades: ['VueJS', 'Ruby on Rails', 'Elixir']
  }
];

Escreva uma função que produza o seguinte resultado:

O Diego possui as habilidades: Javascript, ReactJS, Redux
Gabriel possui as habilidades: VueJS, Ruby on Rails, Elixir

Dica: Para percorrer um vetor, você deve utilizar a sintaxe for...of e para unir valores de um array com um separador, utilize o join."

Minha resolução:

for (let dados of usuarios) {
  console.log("O " + dados.nome + " possui as habilidades: " + dados.habilidades.join(", "));
}

Eu não entendi muito bem a utilização do método join nesse exercício. Se eu tirá-lo do console.log, o resultado é exatamente o mesmo no console. Estou usando errado ou o resultado é realmente o mesmo usando ou não ele?

Dei uma lida na documentação do método, mas não entendi o uso nesse exercício, no caso ele juntaria os dos arrays em uma única string?

7
  • Se eu tirá-lo do console.log, o resultado é exatamente o mesmo no console. aqui faltou dizer o momento. Basicamente a sua duvida talvez falte colocar em algum contexto.
    – novic
    14/03/2020 às 18:52
  • É quando eu chamo ali o "console.log ("O " +dados.nome+ " possui as habilidades: " +dados.habilidades.join(", "));" Se eu colocar console.log ("O " +dados.nome+ " possui as habilidades: " +dados.habilidades); O resultado é o mesmo
    – Kali
    14/03/2020 às 18:53
  • Não é um problema em si, é uma duvida sobre a utilização do join, sendo que se eu tirar, o que aparece no console com ou sem ele é a mesma coisa. Isso que eu não entendi no exercício, já que a dica dada é utilizar o join()
    – Kali
    14/03/2020 às 18:55
  • esse comportamento do console.log que deveria ser a sua pergunta.
    – novic
    14/03/2020 às 18:57
  • E pq desse comportamento do console.log?
    – Kali
    14/03/2020 às 19:05

2 Respostas 2

5

Há diferença entre os dois exemplos. Além disso, esse comportamento não se deve ao console.log e nem ao método join. Isso se dá pelo método toString do array, que é chamado quando a concatenação é feita.

Conforme você pode ler nesta resposta, o operador de concatenação (+) que você está utilizando irá converter todos os operandos ao tipo string caso um dos operandos seja string. Isso significa que, no exemplo abaixo:

const arr = ['L', 'u', 'i', 'z'];
const str = 'As letras são: ' + arr;

console.log(str);

Como um dos operandos do operador + é string, o valor de arr será convertido para string. E isso acontece através do método toString. No caso de arrays, o método toString retornará os elementos do array separados por vírgula.

Esse comportamento também acontece em interpolações, que também chamam o método toString. Veja:

const fake = {
  toString: () => 'Some Value'
};

console.log(`O valor é: ${fake}.`);

E se tentar converter um objeto que não tenha um método toString, o valor, um erro será lançado.

// Criará um objeto sem nenhum método em seu protótipo.
const obj = Object.create(null);

console.log(`Valor: ${obj}`); // Erro!

Portanto, há uma diferença sim entre usar o método join e não usá-lo. Se você não usar o método join, os valores sempre serão separados por vírgulas. O join te permite escolher um separador customizado.

Veja a diferença:

const letters = ['L', 'u', 'i', 'z'];

console.log(letters.toString());
console.log(letters.join());
console.log(letters.join(', '));
console.log(letters.join(' - '));

É válido citar, também, que se nenhum argumento for passado ao método join, o separador será ,, igual ao toString. Enfim, é muito parecido — coincidência, mas não é igual.

3

O resultado não é exatamente o mesmo, se você tirar só o join() basta por para executar e ver que não é. O seu:

var usuarios = [
    {
        nome: "Diego",
        habilidades: ["Javascript", "ReactJS", "Redux"]
    },
    {
        nome: "Gabriel",
        habilidades: ["VueJS", "Ruby on Rails", "Elixir"]
    }
];
for (let dados of usuarios) console.log("O " + dados.nome + " possui as habilidades: " + dados.habilidades.join(", "));

E agora sem o join():

var usuarios = [
    {
        nome: "Diego",
        habilidades: ["Javascript", "ReactJS", "Redux"]
    },
    {
        nome: "Gabriel",
        habilidades: ["VueJS", "Ruby on Rails", "Elixir"]
    }
];
for (let dados of usuarios) console.log("O " + dados.nome + " possui as habilidades: " + dados.habilidades);

Notou que tem uma diferença? É parecido mas não é igual.

Por acaso a impressão do array é quase o que você precisa, e se você não quisesse fazer o texto gramaticalmente correto poderia usar a impressão padrão do array e daria o mesmo. Mas é só coincidência.

Se você quer imprimir uma lista de dados com uma separação específica você term que controlar na mão como será impresso, não pode se valor do padrão. Em alguns casos terá que ser muito na mão (imagina se o último tivesse que ser separado com o e e não com uma vírgula), mas há casos que muda pouco e o join() pode resolver. Neste caso ele está montando um texto com cada um dos elementos do array com uma separação indicado por uma vírgula e um espaço.

Vou dar uma dica que muitas pessoas não gostam. E isso define muito como a pessoa evoluirá na área de desenvolvimento. Não acredite em "funcionou", em coincidências. Você tem que entender o que está acontecendo ali, caso contrário está errado mesmo que não tenha problema algum, está errado porque você não sabe porque deu certo, então pode ter sido coincidência. Isso parece bobo, mas é muito importante, a maioria das pessoas que ficam patinando em programação ficam nesse situação porque elas acreditam no "funcionou".

Legal ter perguntado, mas cuidado porque a premissa da pergunta está errada em dois pontos, o primeiro já dito, os resultados não são iguais. O segundo é uma hipótese: está acreditando no "funcionou". Não se valha do fato de ter dado mais ou menos certo, porque na próxima pode não ser o que precisa.

A documentação do método é bem clara em dizer o que eu disse aqui, eu nem saberia dizer de forma diferente. O que não está claro, mas a lógica deveria indicar que o array imprime de uma só forma, não tem como você dizer como quer.

Imprimir sem concatenação

Vamos fazer outro exemplo:

var usuarios = [
    {
        nome: "Diego",
        habilidades: ["Javascript", "ReactJS", "Redux"]
    },
    {
        nome: "Gabriel",
        habilidades: ["VueJS", "Ruby on Rails", "Elixir"]
    }
];
for (let dados of usuarios) console.log(dados.habilidades);

Coloquei no GitHub para referência futura.

Olha como mudou. Pra mim esse é um dos pontos que odeio no JavaScript, ele muda o resultado de acordo com o contexto onde o dado foi usado. Terrível. Porém aí tem uma outra coisa que a maioria das pessoas erram.

Internamente o que o console.log() faz é chamar um método toString() daquele tipo de dado. Por alguma razão que vai além da minha compreensão (JS sempre faz essas coisas esquisitas) se você usar concatenação ele não usa o toString() e resolve montar do jeito que ele acha melhor e é quase o que você deseja.

Quase todo mundo faz uso errado, mas mandar imprimir um dado de forma direta assim costuma ser errado. Faz sentido em dados muito simples, mas quando ele é composto o dado que é gerado pelo toString() não serve para impressão. Isto está respondido em Qual é a função do método toString()?.

Aí entramos em outra questão que todos os dados impressos são textos, por isso que todos os tipos precisam ter um toString(). Muitas pessoas acreditam que estão imprimindo números, datas, objetos diversos ou arrays, mas na verdade, você só imprime uma representação textual do dado, sempre, não é possível imprimir o dado puro, a não ser que le já seja um texto, que é o caso do tipo string.

Conclusão

Para o seu caso o join() parece cair como uma luva (não temos certeza porque não temos os requisitos detalhados, e isso é o mais importante e outra dica valiosa para se tornar um bom desenvolvedor, sem requisitos excelente, a solução não será boa). Se ele faz exatamente o que deseja então é ele que resolve.

Se o requisito não falasse no detalhe de como deveria ser impresso então sem ele poderia resolver também, mas fica um pouco pior.

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .