console.log vs return em JavaScript

Texto de: Cristina Leandro

Por que a confusão?

Mesmo que o return e o console.log funcionem de maneiras bem diferentes, muitos desenvolvedores os confundem no contexto de funções. 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 ótimo, pode prejudicar bastante sua aplicação se você não entender o que está acontecendo.

Vamos analisar o código abaixo:

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

Perceba que a função soma não está usando o return, mas sim o console.log para realizar a operação aritmética. Vamos, então, chamar essa função com a linha de baixo em um console.log 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 será impresso 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? Porque por padrão em JavaScript, toda função retorna algo e quando o retorno não é especificado, ou definido, a função retorna undefined, não definido, traduzindo para o português.

Importante: O uso do console.log não retorna um valor, embora imprima o resultado esperado da função no output.

Entendendo o console.log

O console.log é um método que exibe uma mensagem no console e essa mensagem pode ser uma string simples ou qualquer objeto em JavaScript. Essa mensagem não é guardada em lugar nenhum, já que quando queremos guardar valores em programação devemos utilizar variáveis.

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 que ambos os códigos têm o mesmo resultado no output, 10. No primeiro código, o valor atribuído à variável a poderá ser utilizado novamente em outro contexto. Se você quiser somar o valor dessa variável com o valor de outra variável, você consegue fazer isso no primeiro código, mas não no segundo já que não temos como acessar o valor impresso pela função console.log posteriormente.

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 soma é a mesma, mas o código está diferente, pois 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 o resultado ser exibido.

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

Nesse código, diferentemente do primeiro exemplo, o output esperado é 30, já que a operação aritmética é o retorno da função soma, ou seja, o retorno da função foi definido 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 o valor da variável area 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. Então, embora o resultado seja visível e seja exibido no console, o valor em si não é retornado.

Considerações

Diante dessas informações, é importante dizer também que console.log não é seu inimigo e você não deveria parar de usar. Na verdade, esse é um método muito usado pelos desenvolvedores para testar o código. Usar apenas o return não te traz uma visualização do dado, uma vez que não é apresentado no terminal/output. Então, é possível que você acabe utilizando essas duas ferramentas em conjunto dentro dos seus projetos.

Bônus: Colocando em prática

Essa sessão conta com três exercícios relacionados ao tema para que você possa praticar e assim consolidar esse conceito:

01: Escreva uma função chamada calculaMedia que aceite três números como parâmetros e retorne a média desses três números. Em seguida, chame a função com três números de sua escolha e exiba o resultado.

02: Escreva um loop for que itere de 1 a 10 e exiba os números em ordem crescente.

03: Crie uma função chamada saudacao que aceite o nome de uma pessoa como argumento e exiba uma saudação personalizada, por exemplo, "Olá, [nome]!". Depois, chame a função com um nome de sua escolha.

Conclusão

Resumindo rapidamente, neste artigo foram vistos os conceitos de return e console.log e como seu uso pode afetar o seu código. Vimos que return é usado para retornar valores em uma função e o console.log para exibir dados.

Lembrando que toda função em JavaScript, por padrão, retorna algo, e por isso, utilizar apenas o console.log não é uma boa prática e pode gerar comportamentos indesejados. Por isso, é sempre muito interessante se atentar aos detalhes!