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!
};

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"] 

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>();

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, [e-mail]
2. bianca, [e-mail]

Para isso, basta fazer:

alunos.set("carlos", "[e-mail]");
alunos.set("bianca", "[e-mail]");

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); // "[e-mail]"

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

console.log(emailFulano); // undefined

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

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

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

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

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