console.log() - O seu melhor amigo!

Olá pessoal!

Hoje venho falar sobre aquele que pode ser o seu melhor amigo no processo de desenvolvimento:

console.log()

.log() é um método do objeto console, que te permite ter uma mensagem de retorno no console do seu VSCode caso você esteja trabalhando apenas com JavaScript, ou então retorna uma mensagem no console do navegador caso você esteja utilizando JavaScript para manipular HTML e deixar sua página dinâmica.

E por que digo que é o seu melhor amigo? Porque é uma das ferramentas que mais vai te ajudar a encontrar erros nos seus códigos e resolver mais rápido os problemas.

Sua aplicação é bem simples, ele recebe como argumento da função exatamente o que você quer que seja printado no console.

console.log() no VSCode:

Digamos que você está desenvolvendo uma função, tenha se deparado com um retorno diferente do que era o esperado e você não consegue entender o que pode estar acontecendo na função. O console.log() será o seu melhor amigo nessa hora.

Você pode colocar como argumento dele as variáveis ou condições que está avaliando e ver exatamente o que elas estão retornando. Vamos ver na prática, teremos um array de números:

const points = [40, 100, 1, 5, 25, 10];

Agora desejamos que ele fique em ordem númerica crescente.

function ordenarArray(arr) { 
  const pointSort = points.sort();
  return pointSort;
}

ordenarArray(points)

O .sort() é um método que serve para ordenar elementos, porém ao executar a função acima, meu avaliador retorna que não obteve o resultado esperado.

Mas se o .sort() ordena, o que será que aconteceu? E como posso descobrir o que está retornando? Simples, usando o console.log(). Antes de avaliarmos a função, testamos para verificar o seu retorno

function ordenarArray(arr) { 
  const pointSort = points.sort();
  console.log(pointSort);
}

ordenarArray(points)

Ao olharmos o console do nosso VSCode após clicarmos em Run Code, percebemos o seguinte retorno:

[Running] node "/home/thiago-troll/Documents/teste/consolelog/console2.js"
[ 1, 10, 100, 25, 40, 5 ]

[Done] exited with code=0 in 0.072 seconds

Com a ajuda do console.log() descobrimos que sem receber argumentos, o sort() acaba ordenando apenas pelo primeiro valor.

console.log() no Navegador:

Para acessar o console no navegador basta clicar com o botão direito e clicar em inspecionar. Você perceberá que existirão diveras opções: Elements que exibirá toda árvore HTML, console onde terão as mensagens de erro ou as mensagens que mandares imprimir no console.log().

Agora pense que você está adicionando um botão no seu HTML e quer que ele execute uma funcionalidade via JavaScript. Qual a primeira coisa que você quer saber? Exatamente, se o JavaScript está capturando o clique. Para isso você pode desenvolver uma função simples no seu JavaScript:

const button = document.querySelector('#button');
button.addEventListener('click', function() {
  console.log('cliquei')
})

E ao abrir o console do navegador teremos a seguinte visão:

Imagem de uma aba do Chrome aberta com o título "Contador de Cliques" e um botão embaixo escrito "clique aqui" do lado esquerdo do navegador e no lado direito aberta a parte de inspecionar, na aba console exibindo a seguinte mensagem: "cliquei"!

Portanto, não se prive de usar o console.log(). Além de ele ajudar na compreensão de cada passo que estás fazendo, ele ajuda muito em lidar com erros e retornos inesperados, otimizando muito nosso processo de criação de código.