Funções em JavaScript: guia completo para iniciantes

O que são funções?

📽️

Assista ao vídeo abaixo. Ele oferece uma base sólida para iniciantes.

Exemplo básico de uma função

function saudacao() {
  console.log('Olá, dev! Bem-vindo ao mundo do JavaScript!');
}

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!

Criando funções no JavaScript

Declaração de função

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

Funções anônimas

const multiplicar = function(a, b) {
  return a * b;
};

console.log(multiplicar(2, 4)); // Saída: 8

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.

Arrow functions

const dividir = (a, b) => a / b;

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.

Parâmetros e argumentos

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

function saudacaoComNome(nome = 'dev') {
  console.log(`Olá, ${nome}!`);
}

saudacaoComNome(); // Saída: Olá, dev!

Retorno de valores

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

Escopo local

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

let mensagemGlobal = 'Fora da função';

function mostrarMensagem() {
  console.log(mensagemGlobal);
}

mostrarMensagem(); // Saída: Fora da função

Funções de alta ordem

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

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

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)

(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.

2. 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.

(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.

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

// 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

function fatorial(n) {
  if (n === 0) {
    return 1;
  }
  return n * fatorial(n - 1);
}

console.log(fatorial(5)); // Saída: 120

O que está acontecendo no código?

1. Base da recursão: A função fatorial verifica primeiro se o número n é igual a 0. Se for, ela retorna 1, porque o fatorial de 0 é 1. Essa é a condição de parada, que impede a função de continuar se chamando indefinidamente.

2. Chamada recursiva: Se n não for 0, a função se chama novamente, passando o valor n - 1. Cada chamada vai multiplicar n pelo fatorial do número anterior até que n seja 0.

3. Resultado: Para fatorial(5), a sequência é assim:
• fatorial(5) retorna 5 * fatorial(4)
• fatorial(4) retorna 4 * fatorial(3)
• fatorial(3) retorna 3 * fatorial(2)
• fatorial(2) retorna 2 * fatorial(1)
• fatorial(1) retorna 1 * fatorial(0)
• fatorial(0) retorna 1, finalizando a recursão.

4. Resultado final: Essas multiplicações vão sendo resolvidas de baixo para cima, até que o resultado final, 120, seja retornado e impresso no console.

A recursão permite que problemas complexos sejam resolvidos de forma elegante, mas é importante sempre definir uma condição de parada (como o if (n === 0)) para evitar que a função entre em loop infinito.

Funções assíncronas (Async/Await)

O que são funções assíncronas?

async function fetchDados() {
  try {
    const resposta = await fetch('https://api.example.com/dados');
    const dados = await resposta.json();
    console.log(dados);
  } catch (erro) {
    console.error('Erro ao buscar dados:', erro);
  }
}

fetchDados();

O que está acontecendo no código?

1. async function: A função fetchDados é marcada como async, o que significa que ela pode conter await dentro dela e retornará uma promessa.

2. await: O await pausa a execução da função até que a promessa seja resolvida. No primeiro await, a função está esperando que a requisição para 'https://api.example.com/dados' seja concluída. Somente depois que a resposta chega, a execução continua.

3. Tratamento de erros: O try/catch é usado para lidar com possíveis erros durante a execução do código assíncrono, como problemas de conexão ou respostas inválidas. Se um erro acontecer, ele será capturado no catch, onde podemos tratar o erro de forma adequada.

Benefícios do Async/Await

• Código mais legível: Com o uso de async/await, o código assíncrono se parece mais com o código síncrono, o que o torna mais fácil de entender e manter.

• Simplificação: Ele elimina a necessidade de aninhar múltiplas promises e callbacks, que podem deixar o código confuso (callback hell).

• Melhor controle de erro: Usando try/catch, você tem uma maneira clara de lidar com erros em operações assíncronas, sem precisar usar .catch() em cada promessa.

Embora o async/await torne o código assíncrono mais legível, as Promises são a base sobre a qual essa sintaxe é construída. Portanto, compreender como as Promises funcionam é essencial para depurar e escrever código assíncrono eficaz.

• Boas práticas atuais:
• Manipulação de erros: utilize try...catch para capturar erros em funções assíncronas, garantindo que exceções sejam tratadas adequadamente.
• Promise.all e Promise.race: continue usando métodos como Promise.all para executar operações assíncronas em paralelo quando apropriado.
• Evite bloquear o event loop: mesmo com async/await, esteja atento para não escrever código que possa bloquear o event loop, afetando a performance da aplicação.
• Uso de finally: com o ES2018, o bloco finally foi introduzido para Promises, permitindo executar código após a resolução ou rejeição de uma Promise.

• Exemplo atualizado:

async function fetchDados() {
  try {
    const resposta = await fetch('https://api.example.com/dados');
    if (!resposta.ok) {
      throw new Error('Erro na rede');
    }
    const dados = await resposta.json();
    console.log(dados);
  } catch (erro) {
    console.error('Erro ao buscar dados:', erro);
  } finally {
    console.log('Operação concluída');
  }
}

fetchDados();

O bloco finally é executado independentemente do resultado da Promise, permitindo liberar recursos ou executar ações finais.

Quer se aprofundar mais? Confira a documentação oficial no MDN sobre funções assíncronas (async) e o uso de try...catch para manipular erros em código JavaScript!

📽️

Quer entender melhor os statements no JavaScript de forma prática? Assista ao vídeo abaixo e aprofunde seus conhecimentos!

Métodos de objetos

const pessoa = {
  nome: 'João',
  saudacao() {
    console.log(`Olá, meu nome é ${this.nome}`);
  },
};

pessoa.saudacao(); // Saída: Olá, meu nome é João

O que está acontecendo?

• A função saudacao foi definida dentro do objeto pessoa, tornando-a um método desse objeto.

• O this dentro da função se refere ao próprio objeto pessoa. Dessa forma, this.nome acessa o valor da propriedade nome do objeto, que é 'João'.

Os métodos são uma forma eficiente de associar comportamentos a objetos e permitem criar funcionalidades reutilizáveis no contexto dos dados que o objeto contém.

Boas práticas para criar funções

• Responsabilidade única: cada função deve realizar apenas uma tarefa específica. Isso torna o código mais modular e fácil de entender. Funções com muitas responsabilidades tendem a ser confusas e difíceis de depurar.

• Nomes significativos: dê nomes que descrevam claramente o que a função faz. Isso facilita a leitura e a manutenção do código. Em vez de calcular, por exemplo, prefira algo mais descritivo como calcularTotalComDesconto.

• Evite efeitos colaterais (side effects): funções devem ser previsíveis, ou seja, devem depender apenas dos parâmetros passados e não alterar variáveis externas ou o estado do sistema de forma inesperada. Isso garante que, ao chamar a função, você saiba exatamente o que ela fará.

• Limite de parâmetros: prefira funções com poucos parâmetros. Idealmente, não mais que três. Se sua função precisa de muitos parâmetros, considere usar um objeto para agrupá-los ou dividir a função em partes menores.

• Adote a sintaxe moderna: utilize arrow functions e desestruturação de objetos e arrays nos seus códigos para refletir as práticas atuais.

// Arrow function com desestruturação
const apresentarUsuario = ({ nome, idade }) => {
  console.log(`Nome: ${nome}, Idade: ${idade}`);
};

const usuario = { nome: 'João', idade: 30 };
apresentarUsuario(usuario);

📽️

Quer elevar a qualidade do seu código? Não deixe de assistir ao vídeo e aprenda práticas essenciais para manter seu código organizado e profissional!

Aplicações práticas

Manipulação de arrays

const numeros = [1, 2, 3, 4, 5];

const quadrados = numeros.map((num) => num * num);

console.log(quadrados); // Saída: [1, 4, 9, 16, 25]

A função passada para .map() transforma cada número do array no seu respectivo quadrado. Esse tipo de operação é muito comum quando você precisa transformar ou processar dados em uma lista.

Interação com o DOM

document.getElementById('meuBotao').addEventListener('click', () => {
  alert('Botão clicado!');
});

Aqui, uma função anônima é usada para exibir um alerta sempre que o botão é clicado. Isso é muito útil para criar interatividade nas páginas, como validar formulários, exibir mensagens ou até mesmo alterar o conteúdo exibido.

📽️

Interessado em manipulação avançada do DOM? Descubra dicas valiosas no vídeo abaixo e aprimore suas habilidades e torne suas páginas web ainda mais interativas!

Conclusão e próximos passos

Quer começar do zero? Conheça o Discover!

Participe da maior comunidade dev da América Latina!

Fique de olho nos canais da Rocketseat

• Rocketseat no Instagram

• Rocketseat no YouTube

• Mayk Brito no YouTube

Bora codar e elevar o nível do seu código?

• Tratamento de Exceções em JavaScript

• Loops em JavaScript: Um Guia Básico para Iniciantes

• Aprender a Programar: Guia Completo para Iniciantes

• Como Iniciar na Programação

• Certificações Relevantes para Programadores

Estamos juntos nessa jornada de aprendizado e evolução contínua. Até a próxima missão, dev!