Funções em JavaScript: guia completo para iniciantes

Mayk Brito

Mayk Brito

5 min de leitura
javascript

Funções em JavaScript: guia completo para iniciantes

Fala, dev! Bora aprender sobre funções em JavaScript? Se você está começando a explorar esse universo incrível da programação, já deve ter ouvido falar sobre funções. Elas são como superpoderes do código: permitem organizar, reutilizar e tornar tudo mais eficiente. Neste artigo, vou te mostrar o passo a passo de como criar e utilizar funções no JavaScript de forma prática e descomplicada. E aí, bora codar?

O que são funções?

Funções em JavaScript são blocos de código que realizam uma tarefa específica. Elas são como robôs programados para realizar ações. Você cria a função uma vez e depois pode chamá-la sempre que precisar. Isso torna o código mais organizado, além de evitar repetição desnecessária.
📽️
Assista ao vídeo abaixo. Ele oferece uma base sólida para iniciantes.
Video preview

Exemplo básico de uma função

Vamos começar criando uma função bem simples que imprime uma saudação:
function saudacao() { console.log('Olá, dev! Bem-vindo ao mundo do JavaScript!'); }
Agora, sempre que você quiser ver essa mensagem, basta chamar a função:
saudacao(); // Saída: Olá, dev! Bem-vindo ao mundo do JavaScript!
Simples, né? Você define o que a função faz e depois pode usá-la quantas vezes quiser.

📽️
Precisa revisar os conceitos básicos antes de avançar? Confira o vídeo abaixo! É uma ótima maneira de refrescar a memória e garantir que você está pronto para mergulhar nas funções!
Video preview

Criando funções no JavaScript

Existem diferentes formas de criar funções em JavaScript, e cada uma tem suas particularidades. Se esses conceitos estão parecendo confusos à primeira vista, não se preocupe! É super normal achar tudo isso um pouco complicado no começo. Mas, com a prática e o tempo, essas ideias vão se tornar cada vez mais naturais. O importante é continuar praticando, errar faz parte do processo.

Declaração de função

A forma mais comum de criar uma função é usando a palavra-chave function:
function somar(a, b) { return a + b; }
Aqui, somar é o nome da função, a e b são os parâmetros (valores que a função vai receber) e return devolve o resultado da soma. Para chamar a função e ver o resultado, basta fazer:
console.log(somar(2, 3)); // Saída: 5
console.log?

Funções anônimas

Outra maneira de criar funções é utilizando funções anônimas. Elas são chamadas assim porque, diferente das funções tradicionais, não têm um nome específico. Em vez disso, são atribuídas a uma variável, o que permite chamá-las quando necessário.
const multiplicar = function(a, b) { return a * b; };
Aqui, a função foi atribuída à variável multiplicar. Para chamar essa função, você usa o nome da variável, como faria com qualquer outra função:
console.log(multiplicar(2, 4)); // Saída: 8
Funções anônimas são muito úteis quando você precisa passar uma função como argumento para outra função (como em callbacks) ou criar uma função rapidamente, sem se preocupar em nomeá-la. Elas são bastante comuns em situações onde o foco está mais na ação que a função executa do que no nome que ela tem.
Ao trabalhar com funções anônimas, você pode facilmente criar lógica dinâmica e flexível dentro do seu código, tornando o desenvolvimento mais fluido.
Callbacks?

Arrow functions

As arrow functions foram introduzidas no ES6 como uma maneira mais curta e simples de escrever funções. Elas eliminam a necessidade da palavra-chave function e têm uma sintaxe mais enxuta:
const dividir = (a, b) => a / b;
Além da sintaxe curta, uma das principais vantagens é que elas não alteram o valor do this, mantendo o contexto léxico da função onde foi criada. Isso as torna especialmente úteis em callbacks e funções simples:
const numeros = [1, 2, 3, 4]; const dobrados = numeros.map(n => n * 2);
No entanto, como não possuem seu próprio this, elas não são ideais para métodos de objetos que dependem desse contexto.
Contexto léxico, this?

Parâmetros e argumentos

As funções podem receber parâmetros, que são valores passados para a função executar sua tarefa. Por exemplo, uma função que recebe um nome e imprime uma saudação personalizada:
function saudacaoComNome(nome) { console.log(`Olá, ${nome}!`); } saudacaoComNome('Rocketseat'); // Saída: Olá, Rocketseat!
Os argumentos são os valores passados quando chamamos a função, como no exemplo acima, onde o argumento é 'Rocketseat'.

Argumentos padrão

Você também pode definir valores padrão para os parâmetros da função. Se o argumento não for fornecido, a função usa o valor padrão:
function saudacaoComNome(nome = 'dev') { console.log(`Olá, ${nome}!`); } saudacaoComNome(); // Saída: Olá, dev!

Retorno de valores

Funções podem retornar valores usando a palavra-chave return. Isso é útil quando você quer usar o resultado da função em outra parte do código:
function multiplicar(a, b) { return a * b; } const resultado = multiplicar(3, 4); console.log(resultado); // Saída: 12
Se a função não usar return, ela retorna undefined por padrão.

Escopo das funções

Um conceito importante em funções é o escopo, que define onde as variáveis estão disponíveis. As variáveis declaradas dentro de uma função não são acessíveis fora dela:

Escopo local

Variáveis declaradas dentro de uma função não são acessíveis fora dela.
function exemploEscopo() { let mensagem = 'Dentro da função'; console.log(mensagem); } exemploEscopo(); // Saída: Dentro da função console.log(mensagem); // Erro: mensagem não está definida
Se tentar acessar mensagem fora da função, dará erro.

Escopo global

Variáveis declaradas fora de funções são acessíveis em qualquer parte do código.
let mensagemGlobal = 'Fora da função'; function mostrarMensagem() { console.log(mensagemGlobal); } mostrarMensagem(); // Saída: Fora da função

Funções de alta ordem

No JavaScript, as funções são tratadas como "primeira classe", ou seja, podem ser passadas como argumentos ou retornadas por outras funções. Funções que fazem isso são chamadas de funções de alta ordem. Elas são extremamente poderosas, pois permitem criar um código mais flexível e dinâmico.
Um exemplo simples de função de alta ordem é uma função que recebe outra função como argumento:
function executarFuncao(funcao) { funcao(); } executarFuncao(() => { console.log('Função passada como argumento!'); });
Isso é muito útil em várias situações, como em eventos de clique em uma página web, onde você passa uma função que será executada quando o usuário clicar em um botão, ou em operações assíncronas, como carregar dados de uma API.

Callback functions

Um tipo muito comum de função de alta ordem são as callbacks, que são funções passadas como argumentos para outras funções e executadas posteriormente. Elas são amplamente usadas em operações assíncronas, como ao lidar com APIs ou eventos de usuário.
Vamos a um exemplo:
function saudacaoPersonalizada(nome, callback) { const mensagem = `Olá, ${nome}!`; callback(mensagem); } saudacaoPersonalizada('Dev', (msg) => { console.log(msg); });
Nesse caso, a função callback é executada depois que a função saudacaoPersonalizada processa a mensagem, tornando o código mais flexível e modular.

Funções que retornam funções

Além de passar funções como parâmetros, outra caracterísica interessante das funções de alta ordem é que elas podem retornar outras funções. Isso abre portas para muitas possibilidades, como criar funções especializadas dinamicamente.
Veja esse exemplo:
function criarMultiplicador(multiplicador) { return function(numero) { return numero * multiplicador; }; } const dobrar = criarMultiplicador(2); console.log(dobrar(5)); // Saída: 10
Aqui, criarMultiplicador retorna uma função que multiplica um número pelo valor passado inicialmente. É uma maneira poderosa de gerar funções sob demanda, de forma dinâmica e reutilizável.

Funções imediatamente invocadas (IIFE)

As IIFE (Immediately Invoked Function Expressions), ou funções imediatamente invocadas, são funções em JavaScript que são executadas assim que são definidas. Elas são bastante úteis quando você quer criar um escopo isolado para seu código, evitando que variáveis definidas dentro da função "vazem" para o escopo global.
A sintaxe de uma IIFE envolve declarar uma função e, logo em seguida, invocá-la com ():
(function() { console.log('Esta função é executada imediatamente!'); })();
Neste exemplo, a função é definida e imediatamente executada. Isso pode ser útil em vários cenários, como ao encapsular código para não poluir o escopo global, especialmente em projetos grandes ou quando você está lidando com bibliotecas de terceiros.

Por que usar IIFE?

  1. Isolamento de variáveis: as variáveis definidas dentro de uma IIFE não interferem nas variáveis fora dela, ajudando a manter o código mais organizado e livre de conflitos.
  1. Execução imediata: se você precisa executar algum código assim que ele for carregado ou processado (como configurações ou inicializações), a IIFE é uma boa opção.
Exemplo prático:
(function() { let mensagem = 'Este código está isolado!'; console.log(mensagem); })(); console.log(mensagem); // Erro! 'mensagem' não está definida fora da IIFE
Como você pode ver, a variável mensagem existe apenas dentro da IIFE. Se tentarmos acessá-la fora da função, ocorrerá um erro, garantindo que o escopo global permaneça limpo.
As IIFE são um padrão bastante comum em scripts que precisam inicializar algo de imediato ou proteger variáveis do escopo global, especialmente antes do surgimento de módulos no JavaScript.
Embora as IIFE ainda sejam úteis em certos contextos, especialmente ao trabalhar com código legado ou bibliotecas que não utilizam módulos, é importante estar ciente das práticas atuais. Se você estiver iniciando um projeto novo, considere utilizar módulos ES6 para gerenciamento de escopo e organização do código.

Alternativa moderna: módulos ES6

Os módulos ES6 permitem dividir seu código em arquivos separados, cada um com seu próprio escopo. Isso facilita a manutenção e a reutilização de código sem poluir o escopo global. Para importar e exportar funções ou variáveis entre módulos, você pode usar as palavras-chave export e import.
// Em arquivo multiplicar.js export function multiplicar(a, b) { return a * b; } // Em outro arquivo import { multiplicar } from './multiplicar.js'; console.log(multiplicar(2, 4)); // Saída: 8
Dica: usar módulos é a forma recomendada para organizar seu código em projetos modernos de JavaScript.

Recursão

Funções recursivas são aquelas que chamam a si mesmas durante a execução. Elas são úteis para resolver problemas que podem ser divididos em subproblemas menores, como o cálculo de fatorial, percorrer árvores de dados, entre outros. Vamos ver um exemplo clássico de recursão: o cálculo do fatorial de um número.
function fatorial(n) { if (n === 0) { return 1; } return n * fatorial(n - 1); } console.log(fatorial(5)); // Saída: 120

Conheça o Rocketseat Para Empresas

Oferecemos soluções personalizadas para empresas de todos os portes.

Mayk Brito

Mayk Brito

CCO @Rocketseat | Education | Tech

Artigos_

Explore conteúdos relacionados

Descubra mais artigos que complementam seu aprendizado e expandem seu conhecimento.

Imagem contendo uma carta e um símbolo de check
NewsletterReceba conteúdos inéditos e novidades gratuitamente