Mais maneiras de imprimir coisas em JavaScript

Texto de: Letícia Garcez

Introdução

Um dos métodos mais conhecidos no universo da programação JavaScript com certeza é o console.log. Esse método nos permite imprimir textos na tela, e muitas vezes é utilizado para fazer o debug de códigos. Porém, essa não é a única forma de imprimir elementos no console, e neste artigo vamos conhecer algumas alternativas a este método.

Método console.assert

Esse método recebe como parâmetro uma expressão que deve ser avaliada para um valor booleano e uma mensagem. A mensagem será impressa com um erro de assertion caso a expressão booleana seja avaliada para false. Se a expressão for verdadeira, nada será impresso. Um exemplo de utilização pode ser visto abaixo:

let a = 4;
let b = 5;

console.assert(a===b, "testando de igualdade");

O código acima gerará a seguinte mensagem no console:

Porém, uma vez que as variáveis a e b tenham o mesmo valor, nada será impresso. A expressão passada para função pode ser de qualquer tipo, desde que possa ser avaliada como verdadeira ou falsa.

Neste e nos próximos exemplos, optei por utilizar o console do navegador para a execução, mas os exemplos também funcionam fora do navegador.

Método console.error

Esse método se assemelha bastante ao console.log, porém possui uma formatação de erro:

console.error("mensagem")

O código acima, por exemplo, gerará a seguinte saída no console:

Método console.warn

O método console.warn é bem similar ao método anterior, porém exibe a mensagem com uma formatação de aviso.

console.warn("mensagem") 

Método console.table

Esse método imprime informações no console no formato de tabela e pode receber como parâmetro objetos ou arrays. A exibição no formato de tabela pode ser muito útil se o seu intuito é visualizar o conteúdo de uma variável que armazena esses tipos de dados.

Um exemplo de impressão pode ser visto abaixo:

let obj = {
	nome:"Pedro",
	idade:14,
	pai: "Afonso",
	mae: "Josefina",
}

console.table(obj) 

E o exemplo de impressão de um array pode ser visto abaixo:

let arr = [10,20,30,40,50,60,70,80,90,100]

console.table(arr)
 

Além de arrays, também podemos fazer a impressão de arrays de arrays usando o mesmo método, como podemos ver abaixo:

let arr = [["a","b"],[5,4,7,10], ["bananas", "maças"]]
console.table(arr) 

Método console.group

O método console.group não é necessariamente uma alternativa ao método console.log, mas é um método utilizado em conjunto com esse. O que o console.group faz é iniciar um grupo e todos os console.log existentes depois da abertura desse grupo serão impressos dentro dele, a menos é claro que o método console.groupEnd seja utilizado para fechar o grupo.

A utilização de grupos pode ser muito útil caso você esteja querendo organizar as impressões de texto para verificar os conteúdos de uma determinada parte do código, como, por exemplo, uma função.

function soma(a, b) {
	console.group("Função soma")
  console.log(`Parâmetros:${a} ${b}`)
  let resultado = a + b
  console.log(resultado)
  console.groupEnd()
  return resultado
}
 soma(1, 7)
 soma(2, 2) 

O exemplo acima é um exemplo básico, utilizando uma função que fará a soma de dois números. Nessa função, eu desejo imprimir alguns dados, no caso, os parâmetros e o resultado, e para isso, defini um grupo com o rótulo “Função soma”. Uma vez que o código seja rodado, o console terá o seguinte conteúdo:

Note que como eu chamei a função duas vezes, temos dois grupos distintos aparecendo no console. Também podemos ter grupos dentro de grupos, como no exemplo abaixo:

function f1() {
    console.group("Função 1")
    console.log("executando função 1")
    f2()
    console.groupEnd()
}

function f2() {
    console.group("Função 2")
    console.log("executando função 2")
    f3()
    console.groupEnd()
}

function f3() {
    console.group("Função 3")
    console.log("executando função 3")
    console.groupEnd()
}

f1() 

Método console.groupCollapsed

O método console.groupCollapsed é similar ao método anterior, com a diferença de que ao invés de os grupos aparecerem expandidos no console agora irão aparecer colapsados.

function f1() {
    console.groupCollapsed("Função 1")
    console.log("executando função 1")
    f2()
    console.groupEnd()
}

function f2() {
    console.groupCollapsed("Função 2")
    console.log("executando função 2")
    f3()
    console.groupEnd()
}

function f3() {
    console.groupCollapsed("Função 3")
    console.log("executando função 3")
    console.groupEnd()
}

f1() 

Se expandirmos esse grupo, ficaremos com o mesmo resultado do exemplo anterior.

É importante dizer aqui que esse método pode não funcionar corretamente dentro do ambiente Node.js, já que ele não oferece a funcionalidade de colapsar os grupos da mesma forma que o console do navegador, então mesmo usando o método console.groupCollapsed o resultado não será colapsado.

Considerações finais

Neste artigo conhecemos algumas alternativas ao método console.log e também vimos alguns outros métodos existentes na classe console que podem se mostrar muito úteis no seu dia a dia.