<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Phyllipe Bezerra</title>
    <description>The latest articles on DEV Community by Phyllipe Bezerra (@pmba).</description>
    <link>https://dev.to/pmba</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F991635%2F59d0e952-32c2-4738-b365-abaf9311424f.jpeg</url>
      <title>DEV Community: Phyllipe Bezerra</title>
      <link>https://dev.to/pmba</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/pmba"/>
    <language>en</language>
    <item>
      <title>File Compression: Understanding the Huffman Coding Algorithm</title>
      <dc:creator>Phyllipe Bezerra</dc:creator>
      <pubDate>Thu, 26 Jan 2023 02:08:58 +0000</pubDate>
      <link>https://dev.to/pmba/understanding-the-huffman-coding-algorithm-196n</link>
      <guid>https://dev.to/pmba/understanding-the-huffman-coding-algorithm-196n</guid>
      <description>&lt;p&gt;Hello! First of all I just wanna to make clear that this article is a result of me just trying to understand something new. Feel free to suggest or point out necessary corrections!&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Huffman Enconding?
&lt;/h2&gt;

&lt;p&gt;Huffman encoding is a lossless data compression algorithm that assings variable-length encoding "words" to fixed-length input characters based on their frequencies of occurence. These words are chosen in a way that more frequent characters have shorter words and less frequent characters have longer words.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Variable-length encoding?
&lt;/h2&gt;

&lt;p&gt;Before that, let's understand what's the problem with fixed-length encoding. It's quite simple:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Fixed-length enconding &lt;strong&gt;waste space&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;See for example, the string &lt;code&gt;"test tested test"&lt;/code&gt;, since &lt;code&gt;"test"&lt;/code&gt; appear three times we would be wasting space encoding this string with a fixed-length approach.&lt;/p&gt;

&lt;h3&gt;
  
  
  The solution
&lt;/h3&gt;

&lt;p&gt;And here comes the variable-length approach:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Encoding of different lengths for different characters&lt;/li&gt;
&lt;li&gt;Assing shorter encodings to frequently occuring characters&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For exemple, take the word &lt;code&gt;"test"&lt;/code&gt;. First let's check the characters frequencies of occurence:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Characters&lt;/th&gt;
&lt;th&gt;Frequency&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;t&lt;/td&gt;
&lt;td&gt;2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;e&lt;/td&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;s&lt;/td&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Now create a linked list in ascending order based on the frequency, the list node element will have a character space, frequency space, a pointer to the next list node, and to make things simple, right and left pointers that we will use to create a binary tree soon. So it would be something like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fur1fkq3f2946ex42f8j4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fur1fkq3f2946ex42f8j4.png" alt="A linear list containing 3 elements, each element is formed by 3 horizontal rectangles vertically stacked and at the bottom 2 side-by-side squares, each of this elements have an arrow pointing to the next, the order is S, E and T, with 1, 1 and 2 frequency values respectively." width="516" height="225"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now we need to remove and "merge" the nodes with the &lt;strong&gt;two lowest frequencies&lt;/strong&gt;, forming a new node that will be the parent node. The parent node will have the character value as an asterisk (*) and the frequency value will be the sum of its children. Also the left and right pointers will point to the lowest frequency child and the second lowest frequency child respectively. So for this step with our list we would get something like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo2tcbsvjbp5ym2s2nnkc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo2tcbsvjbp5ym2s2nnkc.png" alt="A list element at the top containing an asterisk as character and with frequency value as 2, right above at the left there is a child element with values S and 1, to character and frequency respectively, and at the right another child element with values R and 1. Forming a binary tree with 2 leaves." width="265" height="425"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And then we can put this tree at the tail of our list, and it will be like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiz68lxm10nm8gxa8nf8q.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiz68lxm10nm8gxa8nf8q.png" alt="The same previously binary tree with the next pointer pointing to the last list element with values T and 2." width="456" height="425"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;While the head element of the list is not a parent node, i.e a node with character as asterisk, we need to repeat the previously step, so our list will be like this at the end of the second iteration:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp473ws3djlh07zhg3zcp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp473ws3djlh07zhg3zcp.png" alt="A binary tree with root element with values * and 4, the left child is the tree mentioned before and the right child is an element with values T and 2." width="396" height="625"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;At this point, we already can get the encoding for our characters. To get the enconding we need to go from the root node to the leaves tracking the direction, if we go left we can add the value 0 otherwise add 1 to the tracking value, for example:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsshyvv9v1wgmw1vw21uu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsshyvv9v1wgmw1vw21uu.png" alt="The binary tree previously mentioned but each left arrow to left child have value 0 and each right arrow to right child have value 1." width="325" height="625"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;To get the encoding for our character 'S' we need to go to the left and then left again, that way our enconding will be &lt;code&gt;00&lt;/code&gt;. For E character we need to go to the left and then right, so our encoding will be &lt;code&gt;01&lt;/code&gt;, and the T character we need to only go to the right and the encoding will be &lt;code&gt;1&lt;/code&gt;, at the end we would get the encodings as:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Characters&lt;/th&gt;
&lt;th&gt;Frequency&lt;/th&gt;
&lt;th&gt;Encoding&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;t&lt;/td&gt;
&lt;td&gt;2&lt;/td&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;e&lt;/td&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;td&gt;01&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;s&lt;/td&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;td&gt;00&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;As you can see here we already have achieved the two rules previously mentioned:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Encoding of different lengths for different characters&lt;/li&gt;
&lt;li&gt;Assing shorter encodings to frequently occuring characters&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Now let's write down the encoded value of our string &lt;code&gt;"test"&lt;/code&gt; and the binary value:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Binary Value: &lt;code&gt;01110100 01100101 01110011 01110100&lt;/code&gt; - Length: 32&lt;/li&gt;
&lt;li&gt;Encoded Value: &lt;code&gt;1 01 00 1&lt;/code&gt; - Length: 6&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;As you can see here, we got a length reduction of 81%!&lt;/p&gt;

&lt;p&gt;And that's my basic comprehension of the huffman encoding algorithm, next I will be probably coding a file compressor using the huffman encoding approach and I will leave the github repo link once done.&lt;/p&gt;

&lt;p&gt;While that feel free to suggest or point out necessary corrections!&lt;/p&gt;

</description>
      <category>nextjs</category>
      <category>react</category>
      <category>fullstack</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Estruturas de Dados: Entendendo e implementando Maps com Typescript</title>
      <dc:creator>Phyllipe Bezerra</dc:creator>
      <pubDate>Sat, 17 Dec 2022 22:08:24 +0000</pubDate>
      <link>https://dev.to/pmba/estruturas-de-dados-entendendo-e-implementando-hash-maps-e-hash-sets-no-typescript-5fi6</link>
      <guid>https://dev.to/pmba/estruturas-de-dados-entendendo-e-implementando-hash-maps-e-hash-sets-no-typescript-5fi6</guid>
      <description>&lt;h1&gt;
  
  
  Vamos lá
&lt;/h1&gt;

&lt;p&gt;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:&lt;/p&gt;

&lt;h3&gt;
  
  
  Tipos das chaves
&lt;/h3&gt;

&lt;p&gt;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...)&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;obj&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Chave Número Inteiro&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;A&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Chave String&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nc"&gt;Symbol&lt;/span&gt;&lt;span class="p"&gt;()]:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Chave Símbolo&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;

    &lt;span class="p"&gt;[[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;]]:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Chave Array&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="c1"&gt;// Erro!&lt;/span&gt;
    &lt;span class="p"&gt;[{&lt;/span&gt; &lt;span class="na"&gt;chave&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;valor&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;}]:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Chave Objeto&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="c1"&gt;// Erro!&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Ordem dos elementos
&lt;/h3&gt;

&lt;p&gt;No objeto a ordem dos elementos não é obrigatóriamente preservada, já nos Maps a ordem é preservada.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;obj&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;A&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Item 1&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Item 2&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Item 3&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;Object&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;keys&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;obj&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; &lt;span class="c1"&gt;// ["1", "2", "A"] &lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Para mais detalhes sobre o Map e suas diferenças é bom dar uma olhada na documentação:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map"&gt;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Map
&lt;/h2&gt;

&lt;p&gt;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?&lt;/p&gt;

&lt;h3&gt;
  
  
  Definição
&lt;/h3&gt;

&lt;p&gt;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.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Criando um Map vazio, o primeiro tipo é o tipo da chave&lt;/span&gt;
&lt;span class="c1"&gt;// E o segundo tipo é o tipo do valor.&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;alunos&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nb"&gt;Map&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Adicionando Valores
&lt;/h3&gt;

&lt;p&gt;Agora precisamos adicionar os alunos nessa estrutura, certo? Para isso o Set conta com o método &lt;code&gt;set&lt;/code&gt; que recebe dois parâmetros:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;Map.set(key, value)&lt;/code&gt; - &lt;code&gt;key&lt;/code&gt; é a chave que queremos atribuir o valor &lt;code&gt;value&lt;/code&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Então digamos que precisamos adicionar 2 alunos novos e seus respectivos emails:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;carlos, &lt;a href="mailto:carlos@estudante.com"&gt;carlos@estudante.com&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;bianca, &lt;a href="mailto:bianca@aluna.com"&gt;bianca@aluna.com&lt;/a&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Para isso, basta fazer:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="nx"&gt;alunos&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;set&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;carlos&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;carlos@estudante.com&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;alunos&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;set&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;bianca&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;bianca@aluna.com&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Recuperando Valores
&lt;/h3&gt;

&lt;p&gt;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 &lt;code&gt;get&lt;/code&gt; do Map;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;Map.get(key)&lt;/code&gt; - &lt;code&gt;key&lt;/code&gt; é a chave do qual você deseja pegar o valor, é retornado então o valor &lt;strong&gt;caso exista&lt;/strong&gt;, caso não exista é retornado &lt;code&gt;undefined&lt;/code&gt;.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Pegando o email dos alunos&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;emailBianca&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;alunos&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;bianca&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;emailBianca&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// "bianca@aluna.com"&lt;/span&gt;

&lt;span class="c1"&gt;// Pegando email de um aluno que não está cadastrado&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;emailFulano&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;alunos&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;fulano&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;emailFulano&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// undefined&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Verificando Valores
&lt;/h3&gt;

&lt;p&gt;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 &lt;code&gt;has&lt;/code&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;Map.has(key)&lt;/code&gt; - Verifica se no Map existe a chave &lt;code&gt;key&lt;/code&gt; cadastrada e retorna &lt;code&gt;true&lt;/code&gt; caso exista, &lt;code&gt;false&lt;/code&gt; caso não exista.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Verificando se o Fulano está cadastrado&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;fulanoExiste&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;alunos&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;has&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;fulano&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;fulanoExiste&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// false&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Removendo Chaves e Valores
&lt;/h3&gt;

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

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;Map.delete(key)&lt;/code&gt; - Remove a chave &lt;code&gt;key&lt;/code&gt; e seu valor atrelado, retorna &lt;code&gt;true&lt;/code&gt; caso a chave exista e tenha sido removida ou &lt;code&gt;false&lt;/code&gt; caso a chave não exista e nada tenha sido removido.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Removendo carlos&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;carlosRemovido&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;alunos&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;delete&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;carlos&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;carlosRemovido&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// true&lt;/span&gt;

&lt;span class="c1"&gt;// Removendo um aluno que não existe&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;fulanoRemovido&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;alunos&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;delete&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;fulano&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;fulanoRemovido&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// false&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Verificando Tamanho e Limpando
&lt;/h3&gt;

&lt;p&gt;Podemos também utilizar mais uma propriedade e um método bem úteis. A propriedade &lt;code&gt;size&lt;/code&gt; e o método &lt;code&gt;clear&lt;/code&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;Map.size&lt;/code&gt; - Retorna um número inteiro contendo a quantidade de chaves presentes no Map.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;Map.clear()&lt;/code&gt; - Limpa todos os valores do Map, ao final o Map não terá mais nada cadastrado nele.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Verificando o tamanho do nosso map de alunos&lt;/span&gt;
&lt;span class="c1"&gt;// Tinhamos cadastrado 2 alunos no começo e removemos carlos&lt;/span&gt;
&lt;span class="c1"&gt;// anteriormente, então deve ter somente 1 aluno.&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;quantidadeDeAlunos&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;alunos&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;size&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;quantidadeDeAlunos&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// 1&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;E agora, adivinha? Virou o ano, nova turma e precisamos limpar o Set para poder cadastrar os novos alunos que chegarão, então:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Limpando nosso set&lt;/span&gt;
&lt;span class="nx"&gt;alunos&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;clear&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="c1"&gt;// Verificando o tamanho&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;alunos&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;size&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// 0&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;p&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map"&gt;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map&lt;/a&gt;&lt;/p&gt;

</description>
      <category>typescript</category>
      <category>datastructures</category>
      <category>maps</category>
      <category>sets</category>
    </item>
    <item>
      <title>Estruturas de Dados: Entendendo e implementando Filas (Queues) com Typescript</title>
      <dc:creator>Phyllipe Bezerra</dc:creator>
      <pubDate>Fri, 16 Dec 2022 23:40:39 +0000</pubDate>
      <link>https://dev.to/pmba/entendendo-e-aplicando-filas-queues-com-typescript-32n2</link>
      <guid>https://dev.to/pmba/entendendo-e-aplicando-filas-queues-com-typescript-32n2</guid>
      <description>&lt;h2&gt;
  
  
  Antes pilha, hoje fila
&lt;/h2&gt;

&lt;p&gt;Anteriormente a gente tinha falado sobre pilhas (stacks) certo? Caso você não tenha lido é bom dar uma passada no artigo anterior pra entender algumas coisinhas que vamos abordar hoje, mas sem demorar muito, vamos lá.&lt;/p&gt;

&lt;p&gt;Então, se lembram da stack? Eu tinha falado que ela era considerada na computação como do tipo &lt;strong&gt;FILO (First In, Last Out)&lt;/strong&gt;, no caso seria “Primeiro a entrar, último a sair”. Então, quando a gente pensa em filas (queues) é praticamente tudo idêntico as pilhas, a única diferença é que a fila é classificada como do tipo &lt;strong&gt;FIFO (!== FILO)&lt;/strong&gt;, perceba que o finalzinho muda:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;FI &lt;strong&gt;LO&lt;/strong&gt; - Primeiro a entrar, &lt;strong&gt;último&lt;/strong&gt; a sair.&lt;/li&gt;
&lt;li&gt;FI &lt;strong&gt;FO&lt;/strong&gt; - Primeiro a entrar, &lt;strong&gt;primeiro&lt;/strong&gt; a sair.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Isso significa que agora ao invés de pensar como se fosse uma pilha de livros a gente pode pensar como se fosse uma fila normal mesmo, de banco por exemplo; Imagina que você acordou 8h da manhã, precisa ir no banco pra resolver problema e tudo mais que não está funcionando resolver pelo app. Você chega lá e a fila ainda tá vazia! Primeiro da fila, pouco tempo depois chegam mais 10 pessoas atrás de você, qual seria a primeira pessoa a ser atendida? &lt;/p&gt;

&lt;p&gt;Você que chegou primeiro, certo? Então pronto, a estrutura de dados fila é justamente isso, ao invés de remover o item do final da lista (como na pilha), nós vamos remover do começo.&lt;/p&gt;

&lt;h2&gt;
  
  
  Entendendo a fila
&lt;/h2&gt;

&lt;p&gt;Então vamos falar da parte de código logo que é a coisa mais simples do mundo. Só duas coisinhas antes, provavelmente se vocês forem procurar conteúdos sobre filas e tudo mais, vão encontrar dois termos &lt;strong&gt;enqueue&lt;/strong&gt; e &lt;strong&gt;dequeue&lt;/strong&gt;, ambos são como geralmente são chamados o ato de adicionar na fila e remover, enqueue (enfileirar) e dequeue (desfileirar), ta bem? Aqui pra facilitar a gente vai usar os métodos do Typescript mesmo, que por sinal já nos dá de maneira nativa a opção de remover um item do começo de uma lista, é a função &lt;code&gt;shift&lt;/code&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;code&gt;shift()&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;O método &lt;code&gt;shift()&lt;/code&gt; &lt;strong&gt;remove o primeiro elemento da lista&lt;/strong&gt; e &lt;strong&gt;retorna o elemento removido&lt;/strong&gt;. Então a gente pode fazer assim:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Vamos criar o array que vai ser nossa fila de pessoas no banco&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;queue&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;

&lt;span class="c1"&gt;// Já sabemos do método `push` que vimos no artigo sobre pilhas, ele&lt;/span&gt;
&lt;span class="c1"&gt;// serve para adicionar um item no final do array, então digamos que&lt;/span&gt;
&lt;span class="c1"&gt;// a Carol acabou de chegar no banco e entrou na fila, então:&lt;/span&gt;

&lt;span class="nx"&gt;queue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Carol&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// Acabamos de adicionar a carol na fila [Carol], mas lógico que não&lt;/span&gt;
&lt;span class="c1"&gt;// vai ter só ela na fila, chegaram mais duas pessoas.&lt;/span&gt;

&lt;span class="nx"&gt;queue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Jaldo Script&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;queue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Cecília Sharp&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// Então agora a nossa fila está com 3 pessoas [Carol, Jaldo, Cecília]&lt;/span&gt;
&lt;span class="c1"&gt;// O caixa chamou o próximo da fila, que é a carol que chegou primeiro&lt;/span&gt;
&lt;span class="c1"&gt;// então no código essa é a hora de retirar o primeiro da fila com o &lt;/span&gt;
&lt;span class="c1"&gt;// método `shift`&lt;/span&gt;

&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;pessoaAtendida&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;queue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;shift&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="c1"&gt;// Agora beleza, a carol que estava como primeira da fila acabou de ser&lt;/span&gt;
&lt;span class="c1"&gt;// atendida e não precisa mais estar na fila.&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;pessoaAtendida&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Carol&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;queue&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// ["Jaldo Script", "Cecília Sharp"]&lt;/span&gt;

&lt;span class="c1"&gt;// E agora a nossa fila ficou assim [Jaldo, Cecília], logo após o caixa&lt;/span&gt;
&lt;span class="c1"&gt;// chamou o próximo que no caso foi o Sr. Jaldo Script&lt;/span&gt;

&lt;span class="nx"&gt;pessoaAtendida&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;queue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;shift&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;pessoaAtendida&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Jaldo Script&lt;/span&gt;

&lt;span class="c1"&gt;// E por fim, chamou a Sra. Cecília Sharp&lt;/span&gt;

&lt;span class="nx"&gt;pessoaAtendida&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;queue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;shift&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;pessoaAtendida&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// Pronto, atendemos todo mundo e na ordem certa, sem causar estresse!&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;E se lembrem... Sempre &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift"&gt;leiam a documentação!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;E é isso, aprendemos mais um método simples e mais uma estrutura de dados! Vamos só repassar umas coisinhas:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Sempre adicionamos no final da fila, para isso usamos o método &lt;code&gt;.push()&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Sempre removemos do começo da fila e para isso usamos o &lt;code&gt;.shift()&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Filas ou Queues são classificadas como &lt;strong&gt;FIFO (First In First Out)&lt;/strong&gt;, ou seja, o primeiro a entrar é o primeiro a sair da fila.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Isso é quase tudo! Leiam as documentações e nos vemos na próxima estrutura.&lt;/p&gt;

</description>
      <category>typescript</category>
      <category>datastructure</category>
      <category>fila</category>
      <category>queue</category>
    </item>
    <item>
      <title>Estruturas de Dados: Entendendo e implementando Pilhas (Stacks) com Typescript</title>
      <dc:creator>Phyllipe Bezerra</dc:creator>
      <pubDate>Fri, 16 Dec 2022 23:22:23 +0000</pubDate>
      <link>https://dev.to/pmba/entendendo-e-aplicando-pilhas-stacks-com-typescript-moa</link>
      <guid>https://dev.to/pmba/entendendo-e-aplicando-pilhas-stacks-com-typescript-moa</guid>
      <description>&lt;h2&gt;
  
  
  Beleza, o que é uma pilha?
&lt;/h2&gt;

&lt;p&gt;Tá bem, sem enrolar muito vamos lá... A pilha é uma estrutura que a gente escuta falar direto, é basicamente uma lista (array) só que tem a condição de que a &lt;strong&gt;última coisa que entra é a primeira que sai&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;No typescript temos acesso a dois métodos muito úteis já presentes nas listas, vamos primeiro criar uma lista vazia e partir pra entender melhor esses métodos:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Criando uma lista vazia que possuirá números&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;list&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;

&lt;span class="cm"&gt;/* Nós apenas acabamos de definir a variável `list` 
* sendo do tipo `number[]`. o `number` é autoexplicativo, 
* é um número! Já o `[]` diz que será um array do tipo que
* vem antes, ou seja, um array de números! */&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Agora que temos nossa lista vazia, vamos entender melhor esses dois métodos.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;code&gt;push()&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;Esse aqui é bem simples, ele &lt;strong&gt;adiciona ao final&lt;/strong&gt; da lista o que passarmos pra ele. Como a lista que criamos antes vai conter números somente, então devemos apenas adicionar números, por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Vamos adicionar os números 2, 4 e 6 na lista que criamos&lt;/span&gt;

&lt;span class="nx"&gt;list&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Adiciona 2&lt;/span&gt;
&lt;span class="nx"&gt;list&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Adiciona 4&lt;/span&gt;
&lt;span class="nx"&gt;list&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;6&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// Adiciona 6&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;list&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// [2, 4, 6] &lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Simples né? E como retorno, ela retorna o tamanho da lista após adicionar o elemento, por exemplo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;newList&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;listLength&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;newList&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;listLength&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// 1&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;newList&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// [2]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Como sempre recomendo que vocês sempre leiam a documentação para ver detalhes mais específicos do que vocês vão utilizar. &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push"&gt;Link para a documentação&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;code&gt;pop()&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;Esse também é bem simples, ele &lt;strong&gt;remove o elemento do final da lista&lt;/strong&gt; e retorna esse elemento que foi removido, bem assim:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Nossa lista está com 3 elementos se lembra? adicionamos [2, 4, 6]&lt;/span&gt;
&lt;span class="c1"&gt;// Agora vamos remover o último elemento&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;removed&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;list&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;pop&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;removed&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// 6&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;list&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// [2, 4]&lt;/span&gt;

&lt;span class="c1"&gt;// Removendo o último elemento de novo&lt;/span&gt;
&lt;span class="nx"&gt;removed&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;list&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;pop&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;removed&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// 4&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;list&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// [2]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Porém, tem um ponto de atenção que precisamos tomar cuidado! Ele só vai remover elemento da lista enquanto houver elemento né?&lt;/p&gt;

&lt;p&gt;Caso a lista esteja vazia ele não irá remover nada e nos retornará &lt;code&gt;undefined&lt;/code&gt;, tipo assim:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;emptyList&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;removed&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;emptyList&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;pop&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;removed&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// undefined&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;emptyList&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// []&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Ai é só um ponto pra tomar cuidado, mas é facilmente tratado.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop"&gt;Leiam a documentação!&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Ok, push e pop, mas e a pilha?
&lt;/h2&gt;

&lt;p&gt;Vamos lá, (só uma informação antes). Se lembra que no começo eu falei que na pilha "&lt;strong&gt;última coisa que entra é a primeira que sai&lt;/strong&gt;"? Então, esse conceito na programação é chamado de &lt;strong&gt;FILO (First In Last Out)&lt;/strong&gt; (Primeiro a entrar, último a sair)&lt;/p&gt;

&lt;h3&gt;
  
  
  Usando e entendendo pilhas
&lt;/h3&gt;

&lt;p&gt;Vamos pensar em uma pilha de livros real em cima de uma mesa, lá temos 3 livros. Como somos desenvolvedores, vamos simular esses livros empilhados com uma lista (só que de cabeça para baixo).&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;books&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Os três porquinhos&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="c1"&gt;// Livro na base&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Chapeuzinho vermelho&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="c1"&gt;// Livro no meio&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Alice no País das Maravilhas&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="c1"&gt;// Livro no topo&lt;/span&gt;
&lt;span class="p"&gt;];&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Para você, é mais fácil pegar o livro que está em baixo de todos ou o que está em cima? Ao meu ver é mais fácil pegar o "Alice no país das maravilhas" do que levantar dois outros livros para poder pegar "Os três porquinhos", concorda?&lt;/p&gt;

&lt;p&gt;Sendo assim, vamos pegar os livros do topo da pilha, para isso podemos usar o método &lt;code&gt;pop&lt;/code&gt; que aprendemos.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;bookOnTop&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;books&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;pop&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;bookOnTop&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// "Alice no País das Maravilhas"&lt;/span&gt;

&lt;span class="nx"&gt;bookOnTop&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;books&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;pop&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;bookOnTop&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// "Chapeuzinho vermelho"&lt;/span&gt;

&lt;span class="nx"&gt;bookOnTop&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;books&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;pop&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;bookOnTop&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// "Os três porquinhos"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;E agora nossa pilha está vazia, vamos adicionar um novo livro? Para isso também aprendemos o método &lt;code&gt;push&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="nx"&gt;books&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Crepúsculo&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;books&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// ["Crepúsculo"]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;E é isso! Acabamos de entender como funciona uma pilha, só repassando tudo aqui: &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Sempre adicionamos no topo da pilha e removemos também do topo&lt;/li&gt;
&lt;li&gt;Para adicionar no topo utilizamos o método &lt;code&gt;push&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Para remover do topo utilizamos o método &lt;code&gt;pop&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Pilhas são do tipo &lt;strong&gt;FILO (First In Last Out)&lt;/strong&gt; ou também podemos encontrar como &lt;strong&gt;LIFO (Last In First Out)&lt;/strong&gt;. Em ambos os casos é basicamente "O que entra por último, sai primeiro".&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Isso é quase tudo! Leiam as documentações.&lt;/p&gt;




&lt;h2&gt;
  
  
  Agora praticando um pouquinho
&lt;/h2&gt;

&lt;p&gt;O desafio de pilhas é o seguinte, você está trabalhando em um aplicativo de calculadora e o seu trabalho de hoje é criar uma função que cheque se os parênteses, colchetes e chaves de uma equação estão corretos, por exemplo:&lt;/p&gt;

&lt;p&gt;Você receberá como entrada uma string como a string a seguir:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;()[]{}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Podendo conter somente chaves, colchetes e parênteses, não terá nenhum outro caractere a não ser esses. A sua função deverá retornar verdadeiro caso a entrada seja válida ou falso caso não seja. Segue alguns exemplos de entrada abaixo:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;()[]{}&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="c1"&gt;// Entrada válida&lt;/span&gt;
&lt;span class="mi"&gt;2&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;([])&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;   &lt;span class="c1"&gt;// Entrada válida&lt;/span&gt;
&lt;span class="mi"&gt;3&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;([{&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;    &lt;span class="c1"&gt;// Entrada inválida, nenhum dos "(", "[" ou "{" abertos foram fechados&lt;/span&gt;
&lt;span class="mi"&gt;4&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;()]&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;    &lt;span class="c1"&gt;// Entrada inválida, o "]" foi fechado sem ter um par abrindo &lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;É esse o desafio, uma dica é se atentem aos casos extremos, por exemplo, e se a entrada for vazia? &lt;/p&gt;




&lt;h3&gt;
  
  
  ⚠️ Solução
&lt;/h3&gt;

&lt;p&gt;Ta bem, vamos lá para a solução. Primeiro tem algumas regras que nós vamos precisar pensar:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Caso a entrada seja vazia, ela será válida pois não existe nada de errado nos parênteses, chaves ou colchetes da equação.&lt;/li&gt;
&lt;li&gt;Só podemos fechar um caractere se o último caractere aberto for do mesmo tipo, por exemplo: &lt;code&gt;(]&lt;/code&gt; não é válido, pois tentamos fechar com &lt;code&gt;]&lt;/code&gt; só que o que estava aberto era &lt;code&gt;(&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Precisamos ficar atentos aos casos onde só tiveram caracteres abertos, por exemplo &lt;code&gt;(((&lt;/code&gt; não é uma entrada válida.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Então bora, primeiro vamos pensar o seguinte toda vez que tiver um char (caractere) abrindo nós vamos precisar salvar ele e toda vez que tiver um char fechando, vamos olhar qual foi o tipo do último char aberto. Caso seja do mesmo tipo podemos continuar, caso não seja já não é mais válido, blz?&lt;/p&gt;

&lt;p&gt;Então vamos lá, primeiro vamos passar por todos os caracteres da entrada:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;checkEquation&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;input&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="nx"&gt;boolean&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Vamos passar por todos os caracteres do input&lt;/span&gt;
    &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;char&lt;/span&gt; &lt;span class="k"&gt;of&lt;/span&gt; &lt;span class="nx"&gt;input&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;

    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Vamos precisar criar um objeto para saber qual são os pares, por exemplo &lt;code&gt;(&lt;/code&gt; e &lt;code&gt;)&lt;/code&gt; são pares, e também precisamos checar quando que o caractere é abrindo e quando é fechando, para isso podemos só checar se o caractere é uma chave do nosso objeto de pares, se for então está abrindo.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;checkEquation&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;input&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="nx"&gt;boolean&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Objeto para os pares&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;pairs&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;)&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;]&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;{&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;}&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
    &lt;span class="p"&gt;};&lt;/span&gt;

    &lt;span class="c1"&gt;// Vamos passar por todos os caracteres do input&lt;/span&gt;
    &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;char&lt;/span&gt; &lt;span class="k"&gt;of&lt;/span&gt; &lt;span class="nx"&gt;input&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;char&lt;/span&gt; &lt;span class="k"&gt;in&lt;/span&gt; &lt;span class="nx"&gt;pairs&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="cm"&gt;/* Caso {char} seja uma chave de {pairs} sabemos 
               que ele está abrindo */&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="c1"&gt;// Caso não seja, ele está fechando&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;E agora é o seguinte, caso esteja abrindo nós precisamos salvar ele como o último char aberto, porém não podemos perder a referência dos anteriores também, é ai que entra a nossa pilha. Sempre que tiver abrindo vamos adicionar na pilha!&lt;/p&gt;

&lt;p&gt;Caso precise ver o último char abrindo basta olhar o topo da pilha e o anterior fica lá até tirarmos o topo.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;checkEquation&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;input&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="nx"&gt;boolean&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Objeto para os pares&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;pairs&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;)&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;]&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;{&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;}&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
    &lt;span class="p"&gt;};&lt;/span&gt;

    &lt;span class="c1"&gt;// Criamos um tipo para os caracteres abertos&lt;/span&gt;
    &lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;OpenChar&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kr"&gt;keyof&lt;/span&gt; &lt;span class="k"&gt;typeof&lt;/span&gt; &lt;span class="nx"&gt;pairs&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="c1"&gt;// Criamos nossa pilha de chars abertos&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;queue&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;

    &lt;span class="c1"&gt;// Vamos passar por todos os caracteres do input&lt;/span&gt;
    &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;char&lt;/span&gt; &lt;span class="k"&gt;of&lt;/span&gt; &lt;span class="nx"&gt;input&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;char&lt;/span&gt; &lt;span class="k"&gt;in&lt;/span&gt; &lt;span class="nx"&gt;pairs&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="c1"&gt;// Caso {char} seja uma chave de {pairs} sabemos &lt;/span&gt;
            &lt;span class="c1"&gt;// que ele está abrindo.&lt;/span&gt;
            &lt;span class="c1"&gt;// E adicionamos na pilha&lt;/span&gt;
            &lt;span class="nx"&gt;queue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;char&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="c1"&gt;// Caso não seja, ele está fechando&lt;/span&gt;
            &lt;span class="c1"&gt;// Ai precisamos verificar se o último char aberto &lt;/span&gt;
            &lt;span class="c1"&gt;// é do mesmo tipo.&lt;/span&gt;

            &lt;span class="c1"&gt;// Primeiro antes de pegar o último aberto, vamos&lt;/span&gt;
            &lt;span class="c1"&gt;// checar se a pilha está vazia, se estiver não é &lt;/span&gt;
            &lt;span class="c1"&gt;// válido já que estaria tentando fechar sem ter &lt;/span&gt;
            &lt;span class="c1"&gt;// aberto.&lt;/span&gt;

            &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;queue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

            &lt;span class="c1"&gt;// Se chegou até aqui sabemos que a pilha não está &lt;/span&gt;
            &lt;span class="c1"&gt;// vazia, então vamos pegar o topo.&lt;/span&gt;
            &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;top&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;queue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;pop&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="nx"&gt;OpenChar&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

            &lt;span class="c1"&gt;// E verificar se são do mesmo tipo, {top} vai ser &lt;/span&gt;
            &lt;span class="c1"&gt;// um char abrindo então podemos pegar seu par pelo&lt;/span&gt;
            &lt;span class="c1"&gt;// objeto {pairs} que criamos.&lt;/span&gt;

            &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;pair&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;pairs&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;top&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;

            &lt;span class="c1"&gt;// E verificamos se {char} e {pair} são iguais, se&lt;/span&gt;
            &lt;span class="c1"&gt;// for é valido e podemos seguir, se não é inválido.&lt;/span&gt;

            &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;pair&lt;/span&gt; &lt;span class="o"&gt;!==&lt;/span&gt; &lt;span class="nx"&gt;char&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;E agora precisamos checar dois pontos, primeiro caso a entrada seja vazia &lt;code&gt;input.length === 0&lt;/code&gt; e segundo caso a entrada seja só de char abertos, ai nossa pilha só teria char aberto, em outras palavras precisamos fechar todos os chars abertos para ser válido.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;checkEquation&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;input&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="nx"&gt;boolean&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Caso a entrada seja vazia&lt;/span&gt;
    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;input&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="c1"&gt;// Objeto para os pares&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;pairs&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;)&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;]&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;{&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;}&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
    &lt;span class="p"&gt;};&lt;/span&gt;

    &lt;span class="c1"&gt;// Criamos um tipo para os caracteres abertos&lt;/span&gt;
    &lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;OpenChar&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kr"&gt;keyof&lt;/span&gt; &lt;span class="k"&gt;typeof&lt;/span&gt; &lt;span class="nx"&gt;pairs&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="c1"&gt;// Criamos nossa pilha de chars abertos&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;queue&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;

    &lt;span class="c1"&gt;// Vamos passar por todos os caracteres do input&lt;/span&gt;
    &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;char&lt;/span&gt; &lt;span class="k"&gt;of&lt;/span&gt; &lt;span class="nx"&gt;input&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;char&lt;/span&gt; &lt;span class="k"&gt;in&lt;/span&gt; &lt;span class="nx"&gt;pairs&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="c1"&gt;// Caso {char} seja uma chave de {pairs} sabemos &lt;/span&gt;
            &lt;span class="c1"&gt;// que ele está abrindo.&lt;/span&gt;
            &lt;span class="c1"&gt;// E adicionamos na pilha&lt;/span&gt;
            &lt;span class="nx"&gt;queue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;char&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="c1"&gt;// Caso não seja, ele está fechando&lt;/span&gt;
            &lt;span class="c1"&gt;// Ai precisamos verificar se o último char aberto &lt;/span&gt;
            &lt;span class="c1"&gt;// é do mesmo tipo.&lt;/span&gt;

            &lt;span class="c1"&gt;// Primeiro antes de pegar o último aberto, vamos&lt;/span&gt;
            &lt;span class="c1"&gt;// checar se a pilha está vazia, se estiver não é &lt;/span&gt;
            &lt;span class="c1"&gt;// válido já que estaria tentando fechar sem ter &lt;/span&gt;
            &lt;span class="c1"&gt;// aberto.&lt;/span&gt;

            &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;queue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

            &lt;span class="c1"&gt;// Se chegou até aqui sabemos que a pilha não está &lt;/span&gt;
            &lt;span class="c1"&gt;// vazia, então vamos pegar o topo.&lt;/span&gt;
            &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;top&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;queue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;pop&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="nx"&gt;OpenChar&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

            &lt;span class="c1"&gt;// E verificar se são do mesmo tipo, {top} vai ser &lt;/span&gt;
            &lt;span class="c1"&gt;// um char abrindo então podemos pegar seu par pelo&lt;/span&gt;
            &lt;span class="c1"&gt;// objeto {pairs} que criamos.&lt;/span&gt;

            &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;pair&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;pairs&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;top&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;

            &lt;span class="c1"&gt;// E verificamos se {char} e {pair} são iguais, se&lt;/span&gt;
            &lt;span class="c1"&gt;// for é valido e podemos seguir, se não é inválido.&lt;/span&gt;

            &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;pair&lt;/span&gt; &lt;span class="o"&gt;!==&lt;/span&gt; &lt;span class="nx"&gt;char&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="c1"&gt;// Precisamos garantir que todos os char abertos foram fechados&lt;/span&gt;
    &lt;span class="c1"&gt;// para isso podemos só checar se a pilha ainda tem algum char.&lt;/span&gt;

    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;queue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;E é isso, algum dos resultados:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;checkEquation&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;""&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; &lt;span class="c1"&gt;// true&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;checkEquation&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;()[]{}&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; &lt;span class="c1"&gt;// true&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;checkEquation&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;([{}])&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; &lt;span class="c1"&gt;// true&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;checkEquation&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;([{&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; &lt;span class="c1"&gt;// false&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;checkEquation&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;}])&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt; &lt;span class="c1"&gt;// false&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Pode parecer assustador a princípio por ser muitas linhas de código mas é por causa dos comentários, segue abaixo a função sem comentários:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;checkEquation&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;input&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="nx"&gt;boolean&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;

    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;input&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;pairs&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;)&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;]&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;{&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;}&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
    &lt;span class="p"&gt;};&lt;/span&gt;

    &lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;OpenChar&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kr"&gt;keyof&lt;/span&gt; &lt;span class="k"&gt;typeof&lt;/span&gt; &lt;span class="nx"&gt;pairs&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;queue&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;

    &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;char&lt;/span&gt; &lt;span class="k"&gt;of&lt;/span&gt; &lt;span class="nx"&gt;input&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;char&lt;/span&gt; &lt;span class="k"&gt;in&lt;/span&gt; &lt;span class="nx"&gt;pairs&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nx"&gt;queue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;char&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;queue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

            &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;top&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;queue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;pop&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="nx"&gt;OpenChar&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
            &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;pair&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;pairs&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;top&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;

            &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;pair&lt;/span&gt; &lt;span class="o"&gt;!==&lt;/span&gt; &lt;span class="nx"&gt;char&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;queue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;É isso, mas sempre comentem seus códigos viu!! Até a próxima estrutura de dados.&lt;/p&gt;

</description>
      <category>typescript</category>
      <category>stack</category>
      <category>pilha</category>
      <category>datastructures</category>
    </item>
    <item>
      <title>Entendendo e aplicando estruturas de dados com Typescript</title>
      <dc:creator>Phyllipe Bezerra</dc:creator>
      <pubDate>Fri, 16 Dec 2022 23:13:12 +0000</pubDate>
      <link>https://dev.to/pmba/entendendo-e-aplicando-estruturas-de-dados-com-typescript-37on</link>
      <guid>https://dev.to/pmba/entendendo-e-aplicando-estruturas-de-dados-com-typescript-37on</guid>
      <description>&lt;h1&gt;
  
  
  Estrutura do que?
&lt;/h1&gt;

&lt;p&gt;Algoritmos e estrutura de dados são dois termos que a gente escuta bastante ao longo da carreira como desenvolvedor, geralmente a maioria dos desenvolvedores sabem que esses dois pontos são bem importantes, porém devido ao nível de abstração que as linguagens de programação já se encontram, dificilmente o programador vai precisar implementar alguma estrutura de dados a partir do zero e com certeza já vai ter uma função já da linguagem ou até mesmo uma biblioteca que faça o serviço necessário. Mas parando para pensar, se estruturas de dados e algoritmos são usados por detrás dos panos já pra deixar tudo mais eficiente e rápido, por que não aprender sobre pra deixar o nosso código mais eficiente por exemplo?&lt;/p&gt;

&lt;p&gt;Mas afinal, o que são estruturas de dados? Resumindo, a gente pode pensar que é uma maneira específica de organizar os dados na memória do computador de uma forma que certas operações fiquem mais fáceis e mais eficientes. Você já convive com estruturas de dados diariamente no seu código, variáveis comuns já são estruturas de dados primitivas, ou seja, quando você digita aquele:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;variável&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Você acabou de definir uma estrutura de dados, ela está organizando os bits na memória do computador de forma que contenha o valor 10. Mas o que vamos falar é sobre estruturas de dados mais complexas.&lt;/p&gt;

&lt;h2&gt;
  
  
  Quais estruturas vamos aprender?
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;Atenção! Os artigos escritos tendem a focar na galera que está começando a aprender sobre as estruturas de dados, nenhum ou pouco código complexo será utilizado (caso tenha tentarei deixar o mais explicado possível).&lt;/p&gt;

&lt;p&gt;Outro ponto é de que o conteúdo pode ser dinâmico, qualquer sugestão ou correção sintam-se a vontade para comentar!&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Ao longo do tempo estarei escrevendo os artigos específicos para cada uma das estruturas abaixo, tentei manter de uma maneira em que o nível de complexidade seja crescente e que possamos utilizar conceitos reaproveitados de uma nas outras. &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;a href="https://dev.to/pmba/entendendo-e-aplicando-pilhas-stacks-com-typescript-moa"&gt;Pilhas (Stacks)&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dev.to/pmba/entendendo-e-aplicando-filas-queues-com-typescript-32n2"&gt;Filas (Queues)&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dev.to/pmba/estruturas-de-dados-entendendo-e-implementando-hash-maps-e-hash-sets-no-typescript-5fi6"&gt;Hash Maps&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;(Em Andamento) Hash Sets&lt;/li&gt;
&lt;li&gt;(Em Andamento) Listas Encadeadas&lt;/li&gt;
&lt;li&gt;(Em Andamento) Hash Tables&lt;/li&gt;
&lt;li&gt;(Em Andamento) Árvores&lt;/li&gt;
&lt;li&gt;(Em Andamento) Grafos&lt;/li&gt;
&lt;/ol&gt;

</description>
      <category>typescript</category>
      <category>beginners</category>
      <category>tutorial</category>
      <category>datastructures</category>
    </item>
  </channel>
</rss>
