Modulo 3 / JavaScript

Controle, Funções e Dados

Estruturas de controle, funções, arrays e objetos.

school Aula 13 schedule 2 horas

Tomando decisoes

if / else

route Estrutura básica

const idade = 17;

if (idade >= 18) {
  console.log('Maior de idade');
} else if (idade >= 16) {
  console.log('Pode votar');
} else {
  console.log('Menor de idade');
}

bolt Ternário (atalho)

// condição ? verdadeiro : falso
const idade = 20;

const status = idade >= 18
  ? 'Maior'
  : 'Menor';

console.log(status); // "Maior"

lightbulb Ideal para condições simples com apenas dois caminhos.

Múltiplas opcoes

switch

const dia = 'segunda';

switch (dia) {
  case 'segunda':
  case 'terça':
  case 'quarta':
  case 'quinta':
  case 'sexta':
    console.log('Dia útil');
    break;
  case 'sábado':
  case 'domingo':
    console.log('Fim de semana!');
    break;
  default:
    console.log('Dia inválido');
}

info Quando usar switch?

▸ Quando você compara uma variável com vários valores exatos
▸ Mais legível que múltiplos if/else if
▸ O break é obrigatório, senão executa os cases seguintes
▸ O default funciona como o else

Repetição

Loops

replay for

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

Quando você sabe quantas vezes repetir.

loop while

let n = 1;

while (n <= 5) {
  console.log(n);
  n++;
}
// 1, 2, 3, 4, 5

Quando não sabe quantas vezes repetir.

list for...of

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

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

Ideal para percorrer arrays.

Organizando código

Funções

functions Declaração tradicional

function saudacao(nome) {
  return `Olá, ${nome}!`;
}

console.log(saudacao('Ana'));
// "Olá, Ana!"

arrow_forward Arrow function (moderna)

const saudacao = (nome) => {
  return `Olá, ${nome}!`;
};

// Versão curta (1 linha):
const dobro = (n) => n * 2;

console.log(dobro(5)); // 10

tune Parâmetros e valores padrão

function criarUsuario(nome, idade, ativo = true) {
  console.log(`${nome}, ${idade} anos, ativo: ${ativo}`);
}

criarUsuario('Maria', 25);       // "Maria, 25 anos, ativo: true"
criarUsuario('João', 30, false); // "João, 30 anos, ativo: false"

Listas de dados

Arrays

data_array Criando e acessando

const cores = ['azul', 'verde', 'vermelho'];

console.log(cores[0]);     // "azul"
console.log(cores[2]);     // "vermelho"
console.log(cores.length); // 3

// Índices começam em 0!
//  [0]     [1]      [2]
// "azul" "verde" "vermelho"

build Métodos principais

const lista = [1, 2, 3];

lista.push(4);     // [1, 2, 3, 4]
lista.pop();       // [1, 2, 3]
lista.unshift(0);  // [0, 1, 2, 3]
lista.shift();     // [1, 2, 3]

lista.includes(2); // true
lista.indexOf(3);  // 2

Transformando dados

Métodos de array

transform map

const nums = [1, 2, 3, 4];

const dobros = nums.map(
  (n) => n * 2
);
// [2, 4, 6, 8]

Transforma cada item gerando um novo array.

filter_alt filter

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

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

Filtra itens com base em uma condição.

compress reduce

const nums = [1, 2, 3, 4];

const soma = nums.reduce(
  (acc, n) => acc + n, 0
);
// 10

Acumula valores em um único resultado.

link Encadeamento de métodos

const precos = [120, 45, 200, 89, 15];

const total = precos
  .filter((p) => p > 50)           // [120, 200, 89]
  .map((p) => p * 0.9)             // [108, 180, 80.1]  (10% desconto)
  .reduce((acc, p) => acc + p, 0); // 368.1

Dados estruturados

Objetos

data_object Criando objetos

const aluno = {
  nome: 'Ana',
  idade: 22,
  curso: 'ADS',
  ativo: true
};

// Acessando propriedades:
console.log(aluno.nome);    // "Ana"
console.log(aluno['curso']); // "ADS"

edit Manipulando objetos

// Alterar valor
aluno.idade = 23;

// Adicionar propriedade
aluno.email = 'ana@email.com';

// Remover propriedade
delete aluno.ativo;

// Verificar se existe
console.log('nome' in aluno); // true

package_2 Desestruturação

const produto = { nome: 'Notebook', preco: 4500, marca: 'Dell' };

// Extrair propriedades em variáveis:
const { nome, preco, marca } = produto;

console.log(nome);  // "Notebook"
console.log(preco); // 4500

Combinando estruturas

Arrays de objetos

const alunos = [
  { nome: 'Ana',    nota: 8.5 },
  { nome: 'Carlos', nota: 6.0 },
  { nome: 'Julia',  nota: 9.2 },
  { nome: 'Pedro',  nota: 4.5 },
];

// Aprovados (nota >= 6)
const aprovados = alunos
  .filter((a) => a.nota >= 6);

// Nomes dos aprovados
const nomes = aprovados
  .map((a) => a.nome);
// ["Ana", "Carlos", "Julia"]

search Encontrando dados

// Encontrar um aluno
const ana = alunos.find(
  (a) => a.nome === 'Ana'
);
// { nome: 'Ana', nota: 8.5 }

// Algum reprovado?
const temReprovado = alunos.some(
  (a) => a.nota < 6
);
// true

// Todos aprovados?
const todosOk = alunos.every(
  (a) => a.nota >= 6
);
// false

Utilitários

Métodos de Object

Object.keys()

const user = {
  nome: 'Ana',
  idade: 22
};

Object.keys(user);
// ["nome", "idade"]

Object.values()

Object.values(user);
// ["Ana", 22]

Object.entries()

Object.entries(user);
// [["nome","Ana"],
//  ["idade", 22]]

content_copy Spread operator (...)

const base = { cor: 'azul', tamanho: 'M' };

// Copiar e modificar
const novo = { ...base, preco: 59.90 };
// { cor: "azul", tamanho: "M", preco: 59.90 }

// Funciona com arrays também:
const a = [1, 2];
const b = [...a, 3, 4]; // [1, 2, 3, 4]

Hora de praticar

Exercício prático

rocket_launch Gerenciador de alunos

Crie um array de objetos com 5 alunos (nome, nota1, nota2)
Crie uma função calcularMedia que recebe nota1 e nota2 e retorna a média
Use map() para adicionar a propriedade media a cada aluno
Use filter() para separar aprovados (media >= 6) e reprovados
Use reduce() para calcular a média geral da turma
Exiba tudo no console com template literals formatados

lightbulb Desafio extra: ordene os alunos por média usando sort().

Próxima aula

Aula 14

DOM: seleção, manipulação e criação de elementos.

task_alt O que aprendemos hoje

check_circle Condicionais (if/else, switch, ternário)
check_circle Loops (for, while, for...of)
check_circle Funções tradicionais e arrow functions
check_circle Arrays e métodos (map, filter, reduce)
check_circle Objetos, desestruturação e spread operator

Próxima aula

auto_stories Referência: MDN JavaScript Guide