Duvida sobre o .filter e o .map

Tanto o filter quanto o map são Prototype para o Array que surgiram para resolver diferentes problemas.

Primeiro vou falar sobre o Filter... Basicamente o Filter vai "filtrar" os dados de uma array de acordo com as regras definidas e retornar uma nova array com os dados filtrados.

Por exemplo, digamos que vc vá receber uma Array de pessoas com nome e nacionalidade .

const json = [
    {
        nome: "Rui Guilherme",
        nacionalidade: "Brasileiro"
    },
    {
        nome: "João Silva",
        nacionalidade: "Brasileiro"
    },
    {
        nome: "Backman Tavares",
        nacionalidade: "Alemão"
    }
]

Agora eu quero selecionar apenas os Brasileiros, como vc faria isso? Uma solução seria usando o for of:

// lembra-se de colocar o json aq, eu fiz o json lá em cima.
const brasileiros = []

for (const data of json) {
  const { nacionalidade } = data
  if(nacionalidade === "Brasileiro") {
   brasileiros.push(data)
  }
}

console.log(brasileiros)

Você acha que essa solução ficou boa? Existem várias formas de resolver ela, e uma dessas formas é usando o filter:

// lembra-se de colocar o json aq, eu fiz o json lá em cima.
const brasileiros = json.filter(data => data.nacionalidade === "Brasileiro")

console.log(brasileiros)

usuárioPara deixar mais claro, digamos que a aplicação vá receber 5 frutas do usuario, e o sistema precisa saber quais frutas tem o nome com mais de 5 letras.

const frutas = ['Banana', 'Tomate', 'Kiwi', 'Uva', 'Abacaxi']

const resultado = frutas.filter(data => data.length > 5)

console.log(resultado)

Conseguiu entender? Você pode ir mais além, por exemplo verificar quais são os números maiores que 10 pelo usuario.

function maiorQueDez(value) {
    return value > 10
}

const array = [11, 8, 152, 5451, 3, 4, 54, 12, 6]

const resultado = array.filter(maiorQueDez)

console.log(resultado)

Agora o map recebe uma Array e retorna uma nova Array com dados "populados/modificados", digamos que o usuario vá digitar vários números e precisa saber a metade deles?

const numeros = [2, 5, 10, 15, 20, 25]

const metade = numeros.map(valores => valores / 2)

console.log(metade)

Você tbm pode dobrar e somar com 10:

const numeros = [2, 5, 10, 15, 20, 25]

const resultado = numeros.map(valores => {
  return {
    dobro: valores * 2,
    soma: valores + 10
  }
})

console.log(resultado)

Solte sua imaginação agora e faça alguns scripts usando esses dois prototypes, só para relembrar: O filter retorna uma array nova com os valores que passarem pelo filtro que vc definiu (Lembra-se que o filtro é uam função) e o map retorna uma nova array com os dados modificados de acordo com as regras de negocio definida por vc.