WDD 131: Fundamentos da Web Dinâmica

S04 – Atividade de Aprendizagem: Funções de Array JavaScript

Visão Geral

A programação funcional é um paradigma de programação que trata a computação como a avaliação de funções matemáticas e evita dados mutáveis e de estado mutável. É um paradigma de programação declarativa, ou seja, a programação é feita com expressões ou declarações em vez de instruções. Os métodos de array que suportam programação funcional incluem filter(), map() e reduce(). Existem outros métodos de array que oferecem suporte à programação funcional, mas esta atividade de aprendizagem se aprofunda nesses três métodos comuns e úteis.

Preparação

array.filter()

O método array.filter() cria um array filtrado a partir do array original usando a condição da função fornecida.

• Referência Array.filter() – MDN

array.map()

O método array.map() percorre por cada elemento do array original usando uma função fornecida e produz um novo array. O array original não é modificado. O novo array é retornado pelo método map(). O novo array terá o mesmo número de elementos que o array original.

• Referência Array.map() – MDN

array.reduce()

O método array.reduce() é usado para reduzir o array a um único valor. Ele executa uma função redutora em cada elemento do array, resultando em um único valor de saída. A função redutora aceita quatro argumentos: acumulador, valor atual, índice atual, array de origem. O valor retornado da função redutora é atribuído ao acumulador, cujo valor é lembrado em cada iteração em todo o array e, por fim, se torna o valor final único resultante.

• Referência Array.reduce() – MDN

Avalie Seu Conhecimento

Para todos esses exercícios, use esta declaração de array:

let nomes = ['Nancy','Blessing','Jorge','Svetlana','Bob'];

• Usando o método array.filter(), crie um array chamado nomesB com apenas os nomes do array de nomes que começam com a letra 'B'.
  Resposta

  let nomesB = nomes.filter(nome => nome.charAt(0) === 'B');

• Usando o método array.map(), crie um novo array chamado tamanhoNomes que contém o tamanho de cada nome no array nomes. A saída esperada é [5, 8, 5, 8, 3].
  Resposta

  let tamanhoNomes = nomes.map((nome) => nome.length);

• Usando o método nomes.reduce(), crie uma expressão que retorna o tamanho médio da string dos nomes na array nomes. O resultado esperado é 5,8.
  Resposta

  nomes.reduce((total, nome) => total + nome.length, 0) / nomes.length;

  O valor inicial da redução é definido como 0. Dentro da função redutora, "total" representa a soma acumulada de tamanhos de strings, e "nome" representa cada nome individual no array. A função redutora adiciona o comprimento de cada nome ao total em cada iteração. (como qualquer acumulador, total += nome.length).