Métodos de Array - Map

Chegamos a mais um post da minha saga de estudos em JavaScript.

No post de hoje irei falar um pouco sobre o método de array map.

Método Map

Map é método de array que pode ser usado quando queremos gerar um novo array com a mesma quantidade de itens do array original, mas com cada item transformado.

O map irá percorrer por todos os itens do array executando uma transformação em cada um deles através de uma função que é passada como argumento.

Este método irá retornar um novo array com os itens modificados, logo, o array original não sofrerá alteração.

O map recebe como argumento uma função.

Esta função pode receber até 3 argumentos:

1: Item, que é o item atual que está sendo iterado
2: Index, que é o índice do item atual que está sendo iterado
3: Array, que é o próprio array original que está sendo iterado

Dos 3 argumentos, somente o item é obrigatório.

const numbers = [1, 2, 3]

const doubleNumbers = numbers.map(item => item * 2)

console.log(doubleNumbers) // Array(3) [ 2, 4, 6 ]

Conforme visto acima, um novo array foi criado a partir do array numbers, pegando os seus itens e multiplicando por 2.

E para ficar claro, abaixo irei imprimir no console o array original e o modificado, para provar que o array original permanece intacto.

console.log(doubleNumbers, numbers) // Array(3) [ 2, 4, 6 ] Array(3) [ 1, 2, 3 ]

Agora iremos pegar um array de produtos e executar o método map nele, fazendo uma verificação e pegando todos os produtos que custarem 30 ou mais e colocando eles com 50% do preço no array novo.

const products = [
  { name: 'Mouse Sem Fio', price: 30 },
  { name: 'Pen Drive', price: 25 },
  { name: 'Cartucho de Tinta', price: 50 },
  { name: 'Suporte Ergonômico para Notebook', price: 23 },
  { name: 'Repetidor de Sinal Wi-Fi', price: 44 }
]

const saleProducts = products.map(product => {
  if (product.price >= 30) {
    return { name: product.name, price: product.price / 2 }
  }

  return product
})

console.log(saleProducts)

// Output

/*
(5) […]

0: Object { name: "Mouse Sem Fio", price: 15 }

1: Object { name: "Pen Drive", price: 25 }

2: Object { name: "Cartucho de Tinta", price: 25 }

3: Object { name: "Suporte Ergonômico para Notebook", price: 23 }

4: Object { name: "Repetidor de Sinal Wi-Fi", price: 22 }

length: 5
*/