← Fundamentos JavaScript

Funções, Condicionais e Loops

Declarar funções · Arrow functions · if/else/switch · for/while · Métodos de array

Se variáveis guardam dados, funções guardam comportamento: um bloco de código reutilizável que recebe entradas (parâmetros) e devolve uma saída (retorno). Combinadas com condicionais e loops, elas são a base de qualquer lógica em JavaScript.

1. Declarando funções

Existem três formas principais de escrever uma função em JavaScript, e elas aparecem constantemente em código real:

// 1. Declaração de função (function declaration)
function somar(a, b) {
  return a + b;
}

// 2. Função anônima guardada em uma variável (function expression)
const somar = function (a, b) {
  return a + b;
};

// 3. Arrow function: sintaxe curta, muito usada hoje
const somar = (a, b) => {
  return a + b;
};

// arrow function com corpo de uma linha: return implícito
const somar = (a, b) => a + b;

function somar(a, b) {
  return a + b;
}

palavra-chavenome da funçãoparâmetros

Quando usar cada forma?

Declaração de função quando você quer que a função exista mesmo antes de ser definida no arquivo (hoisting). Arrow function para funções curtas, callbacks, e quando você quer preservar o this do contexto ao redor. É a forma mais comum em código moderno.

Chamar (executar) uma função é diferente de defini-la:

function somar(a, b) {
  return a + b;
}

somar(2, 3); // chamada da função → retorna 5. Sem os parênteses, você só está se referindo à função, não executando-a.

Testar funções ao vivo →

2. Escopo

Uma variável só existe dentro do bloco ({ }) onde foi declarada com let/const, e dentro de qualquer bloco aninhado nele. Fora disso, ela não existe.

function saudacao() {
  const mensagem = 'Olá!'; // existe só dentro da função
  console.log(mensagem);    // ok
}

saudacao();
console.log(mensagem); // erro! "mensagem" não existe aqui fora

3. Condicionais

if / else / else if

const idade = 16;

if (idade >= 18) {
  console.log('Maior de idade');
} else if (idade >= 12) {
  console.log('Adolescente');
} else {
  console.log('Criança');
}

Operador ternário

Uma forma curta de if/else quando o resultado é um valor (não um bloco de comandos):

const idade = 16;
const status = idade >= 18 ? 'maior' : 'menor';

switch

Útil quando você compara a mesma variável com vários valores possíveis:

const dia = 3;

switch (dia) {
  case 1:
    console.log('Segunda');
    break;
  case 2:
    console.log('Terça');
    break;
  case 3:
    console.log('Quarta');
    break;
  default:
    console.log('Outro dia');
}

Boa prática

Não esqueça o break em cada case: sem ele, a execução "cai" para o próximo case mesmo que não bata (fall-through), um erro clássico e silencioso.

Testar condicionais ao vivo →

4. Loops

for

Ideal quando você sabe (ou controla) quantas vezes o laço deve repetir:

for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

for (let i = 0; i < 5; i++) { ... }

inicialização: roda uma vezcondição: testada antes de cada voltaincremento: roda depois de cada volta

while

Ideal quando você não sabe de antemão quantas voltas serão necessárias: repete enquanto a condição for verdadeira:

let tentativas = 0;

while (tentativas < 3) {
  console.log('Tentativa', tentativas);
  tentativas++;
}

for...of (percorrer arrays)

const frutas = ['maçã', 'banana', 'uva'];

for (const fruta of frutas) {
  console.log(fruta);
}

Testar loops ao vivo →

5. Métodos de array mais usados

Arrays têm métodos prontos para transformar dados sem escrever loops manualmente, a forma mais idiomática de trabalhar com listas em JS moderno:

Método	O que faz	Retorna
forEach	Executa uma função para cada item	undefined (só efeito colateral)
map	Transforma cada item em outro valor	novo array, mesmo tamanho
filter	Mantém só os itens que passam um teste	novo array, tamanho ≤ original
reduce	Acumula todos os itens em um único valor	um valor (número, objeto...)

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

numeros.forEach(n => console.log(n));           // imprime cada número

const dobrados = numeros.map(n => n * 2);        // [2, 4, 6, 8, 10]

const pares = numeros.filter(n => n % 2 === 0);  // [2, 4]

const soma = numeros.reduce((acc, n) => acc + n, 0); // 15

map/filter/reduce não alteram o array original

Todos os três criam um novo array (ou valor) e deixam o original intocado. Diferente de push/pop/splice, que modificam o array em que são chamados.

Testar métodos de array ao vivo →

6. Boas práticas: resumo

• Prefira arrow functions para callbacks e funções curtas.
• Sempre use === dentro de condicionais, nunca ==.
• Nunca esqueça o break em um switch.
• Prefira for...of a for clássico quando só precisar percorrer valores de um array.
• Prefira map/filter/reduce a loops manuais quando estiver transformando dados.

7. Exercícios

1. Três formas: Escreva a mesma função (que recebe um número e retorna seu dobro) como declaração de função, function expression e arrow function.
2. Condicional: Escreva uma função classificar(nota) que retorne 'aprovado' se nota >= 6, senão 'reprovado'.
3. Loop: Use um for para imprimir todos os números pares entre 1 e 20.
4. Array: Dado const precos = [10, 25, 8, 40], use filter para pegar só os preços acima de 15, depois reduce para somar o resultado.
5. Escopo: Explique por que o código abaixo dá erro, e como corrigi-lo:

   function calcular() {
     const resultado = 10;
   }
   console.log(resultado);

---

Próxima aula: Aula 03: DOM, Eventos e Assincronismo →