Funções com e sem retorno

Funções com e sem retorno são usadas em quase todas as linguagens de programação, especialmente em JavaScript. Nesse artigo você vai entender na prática o conceito de retorno em funções e qual a diferença entre funções com e sem retorno, tendo o JavaScript como foco.

Para começo de conversa, o que são funções?

Uma função é como um pequeno programa que executa uma tarefa dentro de um programa maior. Cada função possui linhas de instruções, que juntas formam o corpo da função. As linhas de instruções podem receber parâmetros que serão utilizados no corpo da função para executar alguma instrução.

Todas as funções possuem retorno. Elas sempre retornam um valor. Então, por que devemos especificar um return?

Entendendo o return

Return é uma declaração que finaliza a execução de uma função, retornando um determinado valor. Tudo o que estiver antes do return será executado. Já os códigos colocados após o return não serão executados. Por isso, tenha o cuidado de usar o return somente quando toda a sua função já tiver sido percorrida, para que o resultado seja o que você deseja imprimir.

No exemplo abaixo, a terceira linha, que está depois do returno, é um código inalcançável. Portanto, ela não será executada.

function Teste(a, b){
     return console.log("Olá")
     console.log(a + b) //código inalcançável!!
}
Teste() //imprime Olá

Por esse mesmo motivo, não é possível ter mais de um return, pois o segundo return será sempre inalcançável. No exemplo abaixo, a terceira linha continua sendo um código inalcançável, mesmo contendo um segundo return.

function Teste(a, b){
     return console.log("Olá")
     return(console.log(a + b)) //também inalcançável
}
Teste() //continua imprimindo apenas o Olá

Quando não é especificado um valor para um return, será retornado o valor undefined. Portanto, o return é utilizado para que um valor diferente do padrão seja retornadno na função.

Função sem return

O exemplo abaixo possui uma função soma sem retorno.

function soma(a, b){ //1)
    console.log(a + b) //2)
}
soma(2,3) //3)

Para entender melhor, vou explicar, passo a passo, o que ocorreu nessa função:

1. A função foi declarada e recebeu os parâmetros a e b;
2. Dentro dela, será impressa a soma dos parâmetros a e b;
3. Os valores 2 e 3 foram passados como parâmetros na chamada da função. O número 2 equivale ao parâmetro a, e o número 3 equivale ao parâmetro b.
4. O valor da linha dois é retornado à chamada da função da linha 3;
5. O resultado 5 foi impresso.

Em outras palavras, ocorreu o seguinte:

Função com return

Agora vou escrever a função soma novamente, mas dessa vez utilizando o return.

function soma(a, b){ //1)
    return a + b // 2)
}
console.log(soma(2,3)) //3)

Aconteceu o seguinte:

1. A função foi declarada e recebeu os parâmetros a e b;
2. Dentro dela, a soma será feita e retornada para a chamada da função;
3. Os valores 2 e 3 foram passados como parâmetros na chamada da função. O número 2 equivale ao parâmetro a, e o número 3 equivale ao parâmetro b. O valor será impresso nesse passo e não dentro da função, como ocorre na função sem retorno.
4. O resultado 5 é impresso.

De forma mais didática, temos:

Comparando funções com e sem retorno

A grande diferença entre a função com retorno e a função sem retorno, é que na função com retorno o console.log precisa ser executado fora da função, diretamente na chamada dela. Já na função sem retorno o console.log é executado dentro da função.

Resumindo: o return apenas retorna o valor da expressão feita dentro da função.

É comum que algumas pessoas achem que o console.log e return são iguais, mas isso não é verdade. Console.log e return não são a mesma coisa!

O return finaliza uma função e retorna um valor para onde essa função foi chamada. Já o console.log apenas exibe os valores em tela, inclusive o valor retornado pelo return.

Podemos ver isso no seguinte exemplo:

function saudacao(){
    return "Olá!"
}
saudacao()
console.log(saudacao())

• saudacao() chama a função, mas não exibe nada em tela porque não existe um console.log para acessar o seu valor;
• console.log(saudacao()) é a chamada da função dentro do console.log. Aqui sim o valor retornado pelo return é impresso no output.

Podemos fazer de outra forma:

function cumprimento(){
    return console.log("E aí!")
}
cumprimento()

O cumprimento() já vai imprimir o valor, pois o console.log está dentro da função.

Para saber mais, no MDN Web Docs tem algumas explicações mais aprofundadas sobre funções, return e valores de retorno de função. Bons estudos!