High-order Function MAP
Tulio Faria27 de junho de 2017
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!
Autor
Tulio Faria27 de junho de 2017