High-order Function MAP

Hoje vamos continuar falando sobre programação funcional e High Order Functions, alguns tipos específicos que já vêm com o JavaScript, o primeiro que vamos falar é o MAP, ele transforma os dados ou cada item de um vetor. Vou mostrar um exemplo para ficar mais fácil:

const vetor = [{id: 1, nome: 'Bicicleta', categoria: 1}
{id: 2, nome: 'Toca de natação', categoria: 2}]
vetor.map( function(item){
    console.log(item)
    return item
})

Esse MAP que utilizamos é uma High Order Function porque ela aceita uma função e retorna alguma coisa. Ela fica mais interessante quando utilizamos uma Arrow Function porque conseguimos reduzir o código:

vetor.map((item) => {
  console.log(item)
  return item
})

Então, uma das utilidades do MAP é apenas fazer ele passar pelos itens do vetor. Em React, é muito comum renderizar uma lista de valores na tela dessa forma. A segunda forma é realmente transformar esse vetor, mapear cada valor desse para uma coisa diferente. Para complementar, vamos fazer um exemplo:

Vou criar um outro vetor no qual utilizaria a função para retornar algo específico como só o nome dos itens.

const vetor2 = vetor.map((item) => {
  return 'Nome: ' + item.nome
})
console.log(vetor2)

Então eu estou transformando esse vetor1 em um vetor que só tem nome, poderíamos fazer um cálculo ou algo do tipo. Podemos simplificar ainda mais o código:

const vetor2 = vetor.map((item) => item.nome)
console.log(vetor2)

Se fossemos fazer sem utilizar o MAP, teríamos que utilizar um for e isso daria bem mais trabalho. Uma outra ideia que podemos ter é, por exemplo, definir quais são as categorias que eu tenho e que a gente atribua um item a mais, trocando o ID da categoria pelo nome:

const categoria = {
  1: 'Bicicletas',
  2: 'Natação'
}

const vetor2 = vetor.map((item) => {
  item.categoria = categorias[item.categoria]
  return item
})

console.log(vetor2)

Essas são algumas ideias do que podemos fazer com o MAP, é bastante interessante utilizar isso porque a gente consegue fazer uma sequência de transformações dos dados que provavelmente consiga resolver boa parte dos problemas nos sistemas convencionais. Lembrando que no caso acima ela é uma função pura porque depende exclusivamente dos parâmetros que vêm pra ela, então isso a deixa mais fácil de ser testada, consequentemente a qualidade do código aumenta.

Confira o vídeo:

Curta o DevPleno no Facebook, inscreva-se no canal e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!