Hello, cod3rs world_! Abordarei nesse artigo o conceito de return e console.log em JavaScript, tópico que, por muitas vezes, confunde programadores iniciantes.

Por que a confusão?

Mesmo que o return e o console.log funcionem de maneiras bem diferentes, muitos devs os confundem no contexto de funções.

Veja bem, o JavaScript te dá a liberdade de escolher se você quer retornar algo em uma função ou não. E isso, ao mesmo tempo que pode ser muito bom, se você não entender bem, pode prejudicar bastante sua aplicação.

Primeiramente, vamos analisar o código abaixo:

function soma(x,y){
    console.log(x + y)
}

Perceba que a função soma não está fazendo uso da declaração return, ao invés disso, está usando o console.log para realizar a operação aritmética. Vamos, então, chamar essa função com a linha de baixo e dar uma olhada no que irá aparecer no output:

function soma(x,y){
    console.log(x + y)
}
console.log(soma(10, 20))

Esse código não está errado, não tem mensagem de erro, e será impresso no output o resultado 30.

Mas, na linha abaixo do resultado virá o undefined. E é aí que a confusão vem. 

Vamos lá: se o JavaScript me permite retornar ou não algo em uma função, por que quando não retorno, o undefined aparece?

Colocando de forma simples: porque por padrão em JavaScript, toda função retorna algo.

Quando o retorno não é especificado, ou seja, definido, a função retorna undefined, que é basicamente não definido, traduzindo para o português. O uso do console.log não retorna um valor, embora imprima o resultado esperado da função no output.

Entendendo console.log

O console.log é um método que exibe uma mensagem no console do navegador, daí o nome console.log. A mensagem pode ser uma string simples ou qualquer objeto em JavaScript.

O item em questão aparece apenas no console. No entanto, isso não significa que seu valor é guardado na função e que você pode usá-lo novamente.

Na programação, são utilizadas variáveis para guardar um valor que você quer reutilizar mais tarde, certo? Vamos exemplificar com os códigos abaixo:
código 1.

let a = 5 + 5

console.log(a)

código 2.


console.log(5 + 5)

Podemos ver, portanto, que ambos os códigos tem o mesmo resultado no output, 10. E, embora o segundo código seja menor, só o fato dele ser menor não significa que é melhor ou que faz sentido.

O primeiro código que foi atribuído a variável a poderá ser utilizado novamente em outro contexto.

Se você quiser somar o resultado a com o resultado de outra variável, você consegue fazer isso no primeiro código, enquanto no segundo código, não.

Não existe, portanto, um método para chamar o resultado de um console.log.

Isso significa que você terá de adicionar manualmente depois, o que não é interessante.

Refazendo a função soma utilizando o return:

Aqui temos outro código com o mesmo princípio do primeiro código desse artigo, a finalidade da função soma é a mesma, mas o código está diferente.

Aqui, ao invés de utilizarmos o console.log, utilizamos o return:

function soma(x, y){
    return x + y;
}

Para chamar a função, nós utilizaremos o console.log. Mas atenção, isso é feito apenas para que o resultado seja exibido.

function soma(x, y){
    return x + y;
}
console.log(soma(10,20));

Nesse código, diferente do primeiro exemplo, o output esperado é 30. Apenas 30.

Nesse caso, foi especificado que a operação aritmética é o retorno da função soma, ou seja, foi definido seu retorno e a função não retornará undefined.

Exemplificando com if/else

Vamos analisar o código abaixo:

function area(largura, altura){
    const area = largura * altura
    if (area > 20) {
        console.log('Valor acima do permitido: ${area')
    } else {
        return area
    }
}

Aqui, quando a área for menor que 20, será retornado apenas o valor da área. Por exemplo, no código abaixo será chamada a função com uma área dentro do limite:


console.log(area(2,5))

//Resultado esperado: 10

Agora, a função será chamada novamente, no entanto, com uma área acima do limite:

console.log(area(5,5))

//Resultado esperado: 
//Valor acima do permitido: 25
//undefined

Como já foi visto durante o percurso desse artigo, isso está ocorrendo porque não foi especificado um retorno e sim usado apenas o console.log. Então, embora o resultado seja visível e seja exibido no console, o valor em si não é retornado.

Conclusão

Nesse artigo foi visto, portanto, os conceitos de return e console.log e como seu uso pode afetar o seu código. Por isso é sempre muito interessante se atentar aos detalhes!

E não se esqueça: se você quiser conferir outros conteúdos que temos por aqui sobre o JavaScript, é só acessar os links abaixo:

Classes ou Funções no JavaScript

Como fazer animações CSS sem JavaScript – CSS animation

O ESSENCIAL de JavaScript Funcional em DUAS HORAS

Espero que esses conteúdos ajudem vocês nos estudos e até o próximo artigo!