WebDev 2022 - Aula 6 - JS: laços, arrays e funções

Funções

São "subprogramas" que podem ser executados por código externo

Cidadãs de 1ª classe

Podem receber parâmetros de entrada e produzir uma saída

Funções

function jogaDado() {
    const r = Math.random();
    const dado = 1 + Math.floor(r*6);

    return dado;
}

const meuDado = jogaDado();
let resultado;

if (meuDado >= 5)
    resultado = "Ganhou!";
else
    resultado = "Perdeu!";

console.log(resultado);

Funções

function jogaDado() {
    const r = Math.random();
    const dado = 1 + Math.floor(r*6);

    return dado;
}

function resultado(umDado) {
    let resultado;

    if (umDado >= 5) resultado = "Ganhou!";
    else resultado = "Perdeu!";

    return resultado;
}

const meuDado = jogaDado();
const resposta = resultado(meuDado);

console.log(resposta);

function jogaDado() {
    const r = Math.random();
    const dado = 1 + Math.floor(r*6);

    return dado;
}

function obtemResultado(umDado) {
    let resultado;

    if (umDado >= 5) resultado = "Ganhou!";
    else resultado = "Perdeu!";

    return resultado;
}

const resposta = obtemResultado(jogaDado());

console.log(resposta);

function jogaDado() {
    const r = Math.random();
    const dado = 1 + Math.floor(r*6);

    return dado;
}

function obtemResultado(umDado) {
    let resultado;

    if (umDado >= 5) resultado = "Ganhou!";
    else resultado = "Perdeu!";

    return resultado;
}

console.log(obtemResultado(jogaDado()));

Funções têm seu valor

function sucessorDoPisoDoSextuploDeAleatorio() {
    const r = Math.random();
    const dado = 1 + Math.floor(r*6);

    return dado;
}

function resultado(umDado) {
    const resultado;

    if (umDado >= 5) resultado = "Ganhou!";
    else resultado = "Perdeu!";

    return resultado;
}

const jogaDado = sucessorDoPisoDoSextuploDeAleatorio;

console.log(resultado(jogaDado()));

... mas nem sempre têm nome


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

// versão alternativa
const soma = function (a, b) {
    return a + b;
}


const soma = (a, b) => {
    return a + b;
}

// versão simplificada
const soma = (a, b) => a + b;

clássico

arrow functions


console.log(soma(1, 2));    // 3

Um caso de uso: callbacks

Já que podemos armazenar funções em variáveis...

Funções "genéricas"...

... pedem callbacks "com conteúdo"

... por que não passar como argumento?

Um caso de uso: callbacks

const disciplina = (p1, p2, p3, ep1, ep2, ep3, criterio) => {
    const mp  = ( p1 +  p2 +  p3) / 3,
          mep = (ep1 + ep2 + ep3) / 3;

    return criteiro(mp, mep);
}

const mediaSimples5 = (prova, ep) => {
    return (prova + ep) / 2 >= 5.0;
}

const mediaSimples7 = (prova, ep) => {
    return (prova + ep) / 2 >= 7.0;    
}

const mediaPonderada5 = (prova, ep) => {
    return (3 * prova + ep) / 4 >= 5.0;
}

Um caso de uso: callbacks

let aprovado = disciplina(5.0, 6.5, 5.5,    // true
                          9.0, 5.5, 7.0,
                          mediaSimples5);

aprovado = disciplina(5.0, 6.5, 5.5,        // false
                      9.0, 5.5, 7.0,
                      mediaSimples7);

aprovado = disciplina(5.0, 6.5, 5.5,        // true
                      9.0, 5.5, 7.0,
                      mediaPonderada5);

Um caso de uso: métodos

Cada objeto armazena algumas funções para manipular seu conteúdo

Objeto?

Na teoria da Programação Orientada a Objetos, um objeto é um elemento computacional que representa, no domínio da solução, alguma entidade (abstrata ou concreta) do domínio de interesse... 😴😴😴

Dados

Aquilo que pode ser armazenado e manipulado

Um caso de uso: métodos

const num = 15;

// Método que retorna um número em formato de string
const string = num.toString()

const string = "ola, tudo bem?";

// Método que retorna a string com todos 
// os caractéres em maiúsculo
const gritando = string.toUpperCase() 

console.log(gritando) // OLA, TUDO BEM?

Array

Um sistema que lida com compras

let compra1 = "manga",
    compra2 = "leite",
    compra3 = "paracetamol";

Mas e se eu quiser guardar todas em um mesmo lugar?

let compras = ["manga", "leite", "paracetamol"];
console.log(compras[0]);  // manga
console.log(compras[1]);  // leite
console.log(compras[2]);  // paracetamol

E se eu quiser aumentar a lista?

Array

manga

leite

paracetamol

açaí

push

manga

leite

paracetamol

açaí

compras =

let compras = ["manga", "leite","paracetamol"];

compras.push("açaí");

Array

manga

leite

paracetamol

açaí

pop

manga

leite

paracetamol

compras =

let jogadoFora = compras.pop()

console.log(jogadoFora)  // 'açai'
console.log(compras)     //['manga', 'leite', 'paracetamol']

Array

2

0

1

0

1

2

sort

compras.sort()

console.log(compras)  //['leite', 'manga', 'paracetamol']

leite

paracetamol

compras =

manga

Array

let meiaCompra = compras.slice(0, 2)

console.log(compras)  //['leite', 'manga']
console.log(compras)  //['leite', 'manga', 'paracetamol']

leite

paracetamol

manga

0

1

2

leite

manga

compras =

meiaCompra =

leite

paracetamol

compras =

manga

slice(0,2)

fechado

aberto

Array

Como percorrer os dados?

Abordagem primária : laço "for"

Será a melhor solução?

Alternativas nativas da linguagem

ForEach

- Função embutida de lista

- Use se quiser realizar uma operação para cada item da lista

- Recebe como argumento uma função callback

- Como funciona?

ForEach

"Mota"

"Rodrigo"

"Guerreiro"

"Luiz"

- Mota

- Rodrigo

- Guerreiro

- Luiz

function itemiza (membro) {
    console.log(`- ${membro}`);
}

const produção = ["Mota", "Rodrigo", "Guerreiro", "Luiz"];

produção.forEach(itemiza);

// "- Mota"
// "- Rodrigo"
// "- Guerreiro"
// "- Luiz"

forEach(itemiza)

Laço for

- Útil quando você não tem uma lista

- Quando precisa acessar ou modificar outros itens, além do item atual da iteração

- Como funciona?

Laço for

const produção = ["Mota", "Rodrigo", "Guerreiro", "Luiz"];

for (const membro of produção) {
  console.log(`- ${membro}`)
}

// "- Mota"
// "- Rodrigo"
// "- Guerreiro"
// "- Luiz"

const produção = ["Mota", "Rodrigo", "Guerreiro", "Luiz"];

for (let i = 0; i < produção.length; i++) {
  console.log(`- ${membro[i]}`)
}

// "- Mota"
// "- Rodrigo"
// "- Guerreiro"
// "- Luiz"

Seria melhor usar produção.forEach aqui

Laço for

const aula = 'https://www.ime.usp.br/~jef/bd';

function downloadPDF(url) {
	// função que baixa um pdf e salva no seu pc
}

for (let i; i < 11; i++) {
  const url = `${aula}${i.padStart('2', '0')}.pdf`
  downloadPDF(i)
}

Listas

- ForEach apenas itera

- E se eu quiser modificar o valor de uma lista?

Map

- Retorna uma nova lista

- Modifica o valor de uma lista passando uma callback pra cada item

Map

dobro = numeros.map(multiplicador)

numeros =

2

1

3

7

numeros =

2

1

3

7

dobro =

4

2

6

14

let numeros = [2,1,3,7]

const multiplicador = (n) => {
  return n * 2;
}

let dobro = numeros.map(multiplicador)

console.log(numeros)  //[2,1,3,7]
console.log(dobro)    //[4,2,6,14]

Filter

- Usado pra filtrar apenas valores desejados na lista

- O critério para filtrar é especificado pela callback

Filter

membros =

presentes = membros.filter(PresentesHoje)

"Mota"

"Rodrigo"

"Guerreiro"

"Luiz"

presentes =

"Mota"

"Rodrigo"

membros =

"Mota"

"Rodrigo"

"Guerreiro"

"Luiz"

Filter

let numeros = [0,4,2,7];

const selecionaPequenos = (n) => {
  return n < 3;
}

let pequenos = numeros.filter(selecionaPequenos);

console.log(numeros)    // [0,4,2,7]
console.log(pequenos)   // [0,2]

IMPORTANTE: a função de callback de filter deve retornar um booleano

true para o item passar no filtro

false para ele ser filtrado

Reduce

- Reduz a lista inteira a um único valor (não necessariamente um número)

- O reduce recebe uma função callback e o valor inicial do acumulador

- A callback recebe como parâmetro um acumulador e o elemento atual

Reduce

1

2

3

4

x = 10

x = numeros.reduce(soma, 0)

const soma = (acc, atual) => acc + atual;

let numeros = [1, 2, 3];

sum1 = numeros.reduce(soma, 0);  // soma(0, 1) = 1
                                 // soma(1, 2) = 3
                                 // soma(3, 3) = 6
                                 //	sum1 vale 6

sum2 = numeros.reduce(soma, 10); // soma(10, 1) = 11
                                 // soma(11, 2) = 13
                                 // soma(13, 3) = 16
                                 // sum2 vale 16

1

2

3

4

numeros =

Listas

- Podemos encadear métodos de lista?

Sim!

Listas

1

2

3

4

5

6

x = numeros.filter(menoresQueCinco)

.map(dobre)

.reduce(soma, 0)

x = 21

Vamos por partes

Passo a passo

1

2

3

4

5

6

x = numeros.filter(menoresQueCinco)

1

2

3

4

Passo a passo

1

2

3

4

.map(dobre)

2

4

6

8

x = numeros.filter(menoresQueCinco)

Passo a passo

2

4

6

8

x = 21

.reduce(soma, 0)

.map(dobre)

x = numeros.filter(menoresQueCinco)

Tarefa

Copie os arquivos disponibilizados no discord/descrição para o seu repositório e resolva os exercícios do arquivo javascript

Para verificar o resultado basta abrir o arquivo html e olhar o console no inspetor (F12)

Tarefa

// 1. Gere uma lista contendo apenas os números pares (filter)
const numeros = [1, 4, 10, 23, 26, 27, 29, 30, 311, 320, 4490]

// 2. Faça uma lista que possua apenas frutas com quatro letras (filter)
// Dica: você pode usar 'string'.length para verificar a quantidade de
// caracteres de uma string.
const frutas = [
  'maçã', 'banana', 'pera', 'uva', 'coco', 'caqui', 'kiwi', 'acerola'
]

// 3. Maiusculize os nomes dados (map)
// Dica: Maiusculizar é escrever cada palavra com a inicial em
// maiúsculo. Você pode conferir todos os métodos de String em:
// https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String#m%C3%A9todos
const nomes = ['cecília', 'roberto', 'bruna', 'Osvaldo', 'Carlos']

// 4. Concatene os nomes e sobrenomes da lista (map)
const nomesESobrenomes = [
  ['Fernanda', 'Montenegro'],
  ['Lázaro', 'Ramos'],
  ['Heloísa', 'Périssé'],
  ['Daniel', 'Furlan'],
  ['Adriana', 'Esteves'],
]

// 5. Calcule a média das notas (reduce)
const notas = [7, 5, 4, 3, 8.5]

// 6. Calcule a média ponderada das notas (reduce)
// Cada item da lista é composto por uma sublista com a nota (na
// primeira posição) e o peso (na segunda posição).

const notasComPeso = [[7, 2], [5, 1], [4, 2], [3, 1], [8.5, 2]]

// 7. (Extra) Refaça o exercício 6 tirando as duas menores notas. Dica:
// Lembre dos métodos sort e slice.

WebDev

JavaScript

Aula 6

Laços, listas e funções. Eventos.

USPCodeLab

Funções

Funções

Funções

Funções têm seu valor

... mas nem sempre têm nome

clássico

arrow functions

Um caso de uso: callbacks

Um caso de uso: callbacks

Um caso de uso: callbacks

Um caso de uso: métodos

Um caso de uso: métodos

Array

Array

Array

Array

Array

Array

ForEach

ForEach

Laço for

Laço for

Laço for

Listas

Map

Map

Filter

Filter

Filter

Reduce

Reduce

Outros métodos

Listas

Listas

Passo a passo

Passo a passo

Passo a passo

Tarefa

Tarefa

WebDev