<?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: codingbrah 🤙</title>
    <description>The latest articles on DEV Community by codingbrah 🤙 (@codingbrah).</description>
    <link>https://dev.to/codingbrah</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%2F469174%2F65721f16-9223-4a9b-8ba1-37b35b8355ec.png</url>
      <title>DEV Community: codingbrah 🤙</title>
      <link>https://dev.to/codingbrah</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/codingbrah"/>
    <language>en</language>
    <item>
      <title>What are Data Structures in JavaScript?</title>
      <dc:creator>codingbrah 🤙</dc:creator>
      <pubDate>Tue, 15 Sep 2020 11:59:24 +0000</pubDate>
      <link>https://dev.to/codingbrah/what-are-data-structures-in-javascript-37mb</link>
      <guid>https://dev.to/codingbrah/what-are-data-structures-in-javascript-37mb</guid>
      <description>&lt;p&gt;Hey, hey hey! 🤟 &lt;/p&gt;

&lt;p&gt;Today I want to take a look into some basic &lt;strong&gt;JavaScript Data Structures&lt;/strong&gt;. 🧐&lt;/p&gt;

&lt;p&gt;Yeah, I know, it doesn't sound that fascinating but it's probably the only way to become a code master (or, at least, understand your own code a little more) 😄 .&lt;/p&gt;

&lt;p&gt;Do you pay attention, in your daily work, to &lt;strong&gt;Data Structures&lt;/strong&gt; or don't have time for this stuff, and simply you choose the simplest and fastest solution? Let me know in the comments!&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Data Structure&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Firstly, let’s define what &lt;strong&gt;Data Structure&lt;/strong&gt; is. As the name may suggest &lt;strong&gt;it’s just a way to organize/structure your data&lt;/strong&gt;. Every piece of information that is floating through the web must exist in memory with some kind of solid, logical representation.&lt;br&gt;
It is crucial from the perspective of developers to know the difference between the most popular data structures because in many cases the right choice can noticeably reduce the big O complexity and speed up your app. But what actually &lt;strong&gt;big O&lt;/strong&gt; is? 🤔&lt;/p&gt;
&lt;h2&gt;
  
  
  &lt;strong&gt;Big O&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;The &lt;strong&gt;big O&lt;/strong&gt; notation is a common way to express the time complexity of an app. It’s used in the meaning of the worst-case scenario (situation when your algorithm must handle the worst possible case, for example to loop through the longest or deepest array). Two other notations (rather rarely used) are &lt;strong&gt;Big Omega&lt;/strong&gt; (best case scenario) and &lt;strong&gt;Big Theta&lt;/strong&gt; (average-case scenario). As you can see, developers by their nature don’t look that often on the bright side of life 😔 . There are many different types of orders (complexity types). I’ll definitely take a closer look at each one later, but for now, let’s get used to this concept and go directly to the first data structure - &lt;strong&gt;Stack&lt;/strong&gt;.&lt;/p&gt;
&lt;h2&gt;
  
  
  &lt;strong&gt;Stack - Last In First Out (LIFO)&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;A &lt;strong&gt;stack&lt;/strong&gt; is an ordered list in which the most recently added &lt;br&gt;
element is the first one to remove.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The simplest implementation:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;stack&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt; &lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="nx"&gt;stack&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&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;// stack is now [2]&lt;/span&gt;
&lt;span class="nx"&gt;stack&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// stack is now [2, 5]&lt;/span&gt;
&lt;span class="nx"&gt;stack&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;pop&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt; &lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// stack is now [2]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--v7CeuUYb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/r5qu0myi958u4g1tuuti.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--v7CeuUYb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/r5qu0myi958u4g1tuuti.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Queue - First In First Out (FIFO)&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;As you probably might guess based on the previous definition, a &lt;strong&gt;queue&lt;/strong&gt; is also an ordered list but this time, the most recently added element is the last one to remove. Elements are removed in the same order as they were added.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The simplest implementation:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&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="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;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;// queue is now [2]&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;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// queue is now [2, 5]&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;shift&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt; &lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// queue is now [5]&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--1zvw1zna--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/4y0j2pvu219hes56gqqu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--1zvw1zna--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/4y0j2pvu219hes56gqqu.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Linked List&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Now, when we have the basic knowledge about the two, most fundamental data structures, let’s talk about something much more interesting.&lt;/p&gt;

&lt;p&gt;A &lt;strong&gt;linked list&lt;/strong&gt; is a structure in which each element is linked (or, in other words, has a reference) to the next node. This kind of data structure is at some points implemented, for example, in &lt;strong&gt;Blockchain&lt;/strong&gt;. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--uKAtUvfC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/82xqpzs8tmch32366oaz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--uKAtUvfC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/82xqpzs8tmch32366oaz.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Hash Table&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;The main idea behind the &lt;strong&gt;hash table&lt;/strong&gt; is to speed up the process of searching and comparing elements. Each element has its own number representation that is generating using the &lt;strong&gt;hash function&lt;/strong&gt;. When we want to find a particular element we can just search through the indices (which in many cases can be a lot faster and more efficient). &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--im2E6XZF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/6rgr9au3lyacq0bz9bqy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--im2E6XZF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/6rgr9au3lyacq0bz9bqy.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Summary&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;I know that this topic is probably way less interesting than for example some fancy SEO tricks and on the first look, it’s much harder to understand and put in real-life examples. You must understand, that sometimes, we all have to go through this though definitions to create strong fundamentals before we can do some real magic 🧙‍♂️. Let me know in the comments if you found this topic interesting and if you would add something to it! 🤓&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--U5BI9X5w--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/ighoxj4ume4l7a9zdsic.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--U5BI9X5w--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/ighoxj4ume4l7a9zdsic.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>codenewbie</category>
    </item>
  </channel>
</rss>
