DEV Community

Phyllipe Bezerra
Phyllipe Bezerra

Posted on

Estruturas de Dados: Entendendo e implementando Maps com Typescript

Vamos lá

Vamos lá, sobre Map: seu conceito é basicamente uma estrutura chave-valor, ou seja, teremos chaves únicas que são atreladas a determinados valores, bem como o nosso conhecido objeto do javascript mas com algumas diferenças:

Tipos das chaves

No objeto o tipo de dado que as chaves podem assumir estão restritos a números inteiros, strings e símbolos. Já no Map o tipo poe ser praticamente qualquer um (inteiros, strings, arrays, objetos, etc...)

const obj = {
    1: "Chave Número Inteiro",
    "A": "Chave String",
    [Symbol()]: "Chave Símbolo",

    [[1, 2, 3]]: "Chave Array" // Erro!
    [{ chave: "valor" }]: "Chave Objeto" // Erro!
};
Enter fullscreen mode Exit fullscreen mode

Ordem dos elementos

No objeto a ordem dos elementos não é obrigatóriamente preservada, já nos Maps a ordem é preservada.

const obj = {
    "A": "Item 1",
    2: "Item 2",
    1: "Item 3"
};

console.log(Object.keys(obj)); // ["1", "2", "A"] 
Enter fullscreen mode Exit fullscreen mode

Para mais detalhes sobre o Map e suas diferenças é bom dar uma olhada na documentação:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

Map

Então vamos logo por a mão no código, vamos passar por cada método do Map e explicar a função de cada um, blz?

Definição

Para definir um Map é bem simples, para o nosso exemplo vamos criar um Map que servirá para guardar o nome e o email de diferentes alunos, o nome do aluno será a chave única que estará atrelada ao email do aluno.

// Criando um Map vazio, o primeiro tipo é o tipo da chave
// E o segundo tipo é o tipo do valor.
const alunos = new Map<string, string>();
Enter fullscreen mode Exit fullscreen mode

Adicionando Valores

Agora precisamos adicionar os alunos nessa estrutura, certo? Para isso o Set conta com o método set que recebe dois parâmetros:

  • Map.set(key, value) - key é a chave que queremos atribuir o valor value.

Então digamos que precisamos adicionar 2 alunos novos e seus respectivos emails:

  1. carlos, carlos@estudante.com
  2. bianca, bianca@aluna.com

Para isso, basta fazer:

alunos.set("carlos", "carlos@estudante.com");
alunos.set("bianca", "bianca@aluna.com");
Enter fullscreen mode Exit fullscreen mode

Recuperando Valores

Digamos agora que precisamos verificar qual o email de Bianca, para enviar as notas da prova para ela. Para isso podemos usar o método get do Map;

  • Map.get(key) - key é a chave do qual você deseja pegar o valor, é retornado então o valor caso exista, caso não exista é retornado undefined.
// Pegando o email dos alunos

const emailBianca = alunos.get("bianca");

console.log(emailBianca); // "bianca@aluna.com"

// Pegando email de um aluno que não está cadastrado
const emailFulano = alunos.get("fulano");

console.log(emailFulano); // undefined
Enter fullscreen mode Exit fullscreen mode

Verificando Valores

Para prevenir esse problema de pegar o valor de uma chave que não existe, nós podemos simplesmente verificar se a chave realmente existe no Map, e para isso podemos usar o método has:

  • Map.has(key) - Verifica se no Map existe a chave key cadastrada e retorna true caso exista, false caso não exista.
// Verificando se o Fulano está cadastrado
const fulanoExiste = alunos.has("fulano");

console.log(fulanoExiste); // false
Enter fullscreen mode Exit fullscreen mode

Removendo Chaves e Valores

Agora caso seja necessário remover um aluno cadastrado, tanto sua chave (nome) quanto seu valor (email), podemos utilizar o método delete:

  • Map.delete(key) - Remove a chave key e seu valor atrelado, retorna true caso a chave exista e tenha sido removida ou false caso a chave não exista e nada tenha sido removido.
// Removendo carlos
const carlosRemovido = alunos.delete("carlos");

console.log(carlosRemovido); // true

// Removendo um aluno que não existe
const fulanoRemovido = alunos.delete("fulano");

console.log(fulanoRemovido); // false
Enter fullscreen mode Exit fullscreen mode

Verificando Tamanho e Limpando

Podemos também utilizar mais uma propriedade e um método bem úteis. A propriedade size e o método clear:

  • Map.size - Retorna um número inteiro contendo a quantidade de chaves presentes no Map.
  • Map.clear() - Limpa todos os valores do Map, ao final o Map não terá mais nada cadastrado nele.
// Verificando o tamanho do nosso map de alunos
// Tinhamos cadastrado 2 alunos no começo e removemos carlos
// anteriormente, então deve ter somente 1 aluno.

const quantidadeDeAlunos = alunos.size;

console.log(quantidadeDeAlunos); // 1
Enter fullscreen mode Exit fullscreen mode

E agora, adivinha? Virou o ano, nova turma e precisamos limpar o Set para poder cadastrar os novos alunos que chegarão, então:

// Limpando nosso set
alunos.clear();

// Verificando o tamanho
console.log(alunos.size); // 0
Enter fullscreen mode Exit fullscreen mode

E é isso, bem simples né? Para mais informações sobre a estrutura de dados e detalhes mais específicos sempre recomendo que leiam a documentação, segue o link:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

Postmark Image

"Please fix this..."

Focus on creating stellar experiences without email headaches. Postmark's reliable API and detailed analytics make your transactional emails as polished as your product.

Start free

Top comments (0)

👋 Kindness is contagious

Dive into this thoughtful article, cherished within the supportive DEV Community. Coders of every background are encouraged to share and grow our collective expertise.

A genuine "thank you" can brighten someone’s day—drop your appreciation in the comments below!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found value here? A quick thank you to the author makes a big difference.

Okay