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: Esse MAP que utilizamos é uma High Order Function porque…
por: Tulio Faria
Categoria: DicasVideo-Tutorial
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!