{
    "componentChunkName": "component---src-templates-blog-post-js",
    "path": "/implementing-a-tree-data-structure-in-javascript/",
    "result": {"data":{"markdownRemark":{"html":"<div class=\"table-of-contents\">\n<ul>\n<li>\n<p><a href=\"#root\">Root</a></p>\n</li>\n<li>\n<p><a href=\"#parent--children\">Parent &#x26; Children</a></p>\n</li>\n<li>\n<p><a href=\"#levels\">Levels</a></p>\n</li>\n<li>\n<p><a href=\"#sibling\">Sibling</a></p>\n</li>\n<li>\n<p><a href=\"#creating-a-node-class\">Creating a Node class</a></p>\n<ul>\n<li><a href=\"#directions\">Directions</a></li>\n</ul>\n</li>\n<li>\n<p><a href=\"#creating-a-tree-class\">Creating a Tree class</a></p>\n</li>\n<li>\n<p><a href=\"#directions-1\">Directions</a></p>\n</li>\n</ul>\n</div>\n<p>A <em>tree</em> is a node-based data structure. A node holds data and a reference to all of its children.</p>\n<p>Unlike a <a href=\"https://hemanta.io/implementing-a-linked-list-in-javascript/\">linked list</a> (<em>which is also a node-based data structure</em>), within a tree, each node can have links to <em>multiple</em> nodes.</p>\n<p>Here is a visualization of a simple tree:</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 604px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/3aea63059d235bde9e2105ea03c46fe5/1994c/tree.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 67%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAC4jAAAuIwF4pT92AAABpklEQVQ4y31S2W7jMAzM/39X97nNAaeFcwGBXUu+rfiSJU5BxQqcbXYJDCQQ0nA45MpaW1trJ2ut/hsA9NAPervZ6P1+r9u2dblXbz1W1tqeiOBhrb3fAXdnXK9XbDdb3G43YM4v/yzBhO1MRAwOYwyN48ic/4R/6/95MGG3IHRVyrJE8v2NPM+RSomiKCCkRJpmSIRA13UPpR6+u1+EHEwURxHqunaf+7537bZti6ZRGMcRy1ha5QjnKtwKhBBOIQd7p7XGq+C8UsrBmBcK2bcoip5IbkrhfD47xcv2jDGoqsoVj6IYTdM8E86t0vF4RJ5lD384wjCEFPIpV1cVsjTDer3G4XBAnuXODo6VMcY5nKYpcaUkSZxnc85VT2X6GARHlmXY7Xb48/aGj/d37IPAvXOERNRNWnNrNE2TI2FSbutyuWAYBpRFgTiOHwq5oJQSUoj7KaWzyQ0FQMuJIAhoGAYqy5LCMCSRJHQ6naiqKqrrmr4+P0kpRfeh0q+99DvJCns/MVbAd14RVutPn1vu2yv4tcmZlJXOE2eznk5/nwf4X/wAFpvxLZBmhqEAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Tree Data Structure\"\n        title=\"Tree Data Structure\"\n        src=\"/static/3aea63059d235bde9e2105ea03c46fe5/1994c/tree.png\"\n        srcset=\"/static/3aea63059d235bde9e2105ea03c46fe5/56d15/tree.png 200w,\n/static/3aea63059d235bde9e2105ea03c46fe5/d9f49/tree.png 400w,\n/static/3aea63059d235bde9e2105ea03c46fe5/1994c/tree.png 604w\"\n        sizes=\"(max-width: 604px) 100vw, 604px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<h3 id=\"root\" style=\"position:relative;\"><a href=\"#root\" aria-label=\"root permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Root</h3>\n<p>The uppermost node (in our example, <del>1</del>) is called the root.</p>\n<h3 id=\"parent--children\" style=\"position:relative;\"><a href=\"#parent--children\" aria-label=\"parent  children permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Parent &#x26; Children</h3>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 604px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/775faf9edd28159c2d72c9c88d441788/1994c/parent-children.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 67%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAC4jAAAuIwF4pT92AAABT0lEQVQ4y6WT3W6DMAyF+/7P1ql3vSgS0KbtIAEJ0gDlxz6TI2CC0U3bLB0RiDn+7MCOiEoi6omo2xIzdwBmvcqbtCOihpmxFhFB4vl84m2/x+FwgHPOP5O9rXdEYlhJAhHxloZh4DRJOTiduK5rBjDvSazzxbAeiWR/QbAVE/kIsZAnZOa673sISdM00FrLGm3X4fF4wLnK34umUdyu17ngekzesOt7mRWnaYo4jlEUhZ+d9YZuri7XPMtwv92QmQwjyJJQWpZKWmuOwhDEjOPxCKEVY22MX0tYaxGGIQYiBEEAYzIUZbk4rLlldVGsLgpJkiCKIn+dqKbq5/PZtxuFkTeWPFdVKK1F27afM5T23u93zvMccRTDaI00SRZm0poxxlMqpSC5UrQsracUj7nlccBfjnVN+G1Mh/LTd/gbSbz8U/4qMczFdCSt/6sPgGf32GwLma4AAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Tree Data Structure\"\n        title=\"Tree Data Structure\"\n        src=\"/static/775faf9edd28159c2d72c9c88d441788/1994c/parent-children.png\"\n        srcset=\"/static/775faf9edd28159c2d72c9c88d441788/56d15/parent-children.png 200w,\n/static/775faf9edd28159c2d72c9c88d441788/d9f49/parent-children.png 400w,\n/static/775faf9edd28159c2d72c9c88d441788/1994c/parent-children.png 604w\"\n        sizes=\"(max-width: 604px) 100vw, 604px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>In our example, we’d say that the <del>1</del> is a parent to <del>4</del> and <del>6.</del> Conversely, <del>4</del> and <del>6</del> are children of <del>1.</del> Similarly, <del>6</del> is a parent of <del>3</del> and <del>5,</del> and <del>3</del> and <del>5</del> are children of <del>6.</del></p>\n<h3 id=\"levels\" style=\"position:relative;\"><a href=\"#levels\" aria-label=\"levels permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Levels</h3>\n<p>Trees are said to have levels. Each level is a row within the tree. Our example tree has three levels:</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 604px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/246cccfd3750d037be9ad76f4108bfde/1994c/level.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 67%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAC4jAAAuIwF4pT92AAABqElEQVQ4y31T7Y6jMAzs+79Z/1aq9qRdKFDoFghXKB9JANuncQviete1NLJjksFjJzsiaohoIqLxFcw8iogC8f/2vGJHRJaZhYj+AsxaK2EYSpZmMo6jLPvg3wGE/XPxjxER//r44P1+z977NfcTQDiAcJomRhXANE0yz7P6xbbxq20r3zHzMM8kwzAoIYjqupY4isRaJ957xWCtmNJI27Zyu9XSNHdpmkZudb2SwWuFCKy1jCoQV6aSOI71MNb4EchNWWoOuN/vSlq/I3TeMw5dr1dJkrN+xECqqhLnnOInySvhQ/IsznnG4cPh8OghkVZxPB5VmnNeolMkxhjJ80LyolCv66LQM8uUh6csLopCsixTGfiIzZfsImVZroNC3o/jo7dPj5asQ1mmXFW/OYoiadtOgiDAkFQyyE+nk1a53FHsfy+ZqEcQfAUcxzH3fc9hGHKSJOq7tuOvz09O05TT85mNMVwaw5fvb0YR1zxnDBS8yz3Ul4LKMD0MBr3r+149XgvyXdet1UH6cme3chfJFUhFBC8G/RxEBG1Qv10/+63xFkse+AMAtfJ4BSnL6QAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Tree Data Structure\"\n        title=\"Tree Data Structure\"\n        src=\"/static/246cccfd3750d037be9ad76f4108bfde/1994c/level.png\"\n        srcset=\"/static/246cccfd3750d037be9ad76f4108bfde/56d15/level.png 200w,\n/static/246cccfd3750d037be9ad76f4108bfde/d9f49/level.png 400w,\n/static/246cccfd3750d037be9ad76f4108bfde/1994c/level.png 604w\"\n        sizes=\"(max-width: 604px) 100vw, 604px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<h3 id=\"sibling\" style=\"position:relative;\"><a href=\"#sibling\" aria-label=\"sibling permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Sibling</h3>\n<p>Nodes that are at the same level and share a common parent are siblings of each other.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 604px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/f4b9e679cd93f7c4bc67da8d76038fa1/1994c/sibling.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 67%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAC4jAAAuIwF4pT92AAABRUlEQVQ4y42T3XKCMBCF+/7vZe/tbaVjkzg2KEgggAZ2T2dT4yDS2p05k58NXw7L8kJEjogGIgpzMXOQMFqH3NpwuVzi3tLZpBci6pkZcxERGIwQAt7Wa7yuVnDOQSLmFp4RCbC9AngqiTSmAHCXW5IAuwS8ObuOIon9fg9jzM3d9MySwzvgHNY0DU6nE8qyjPM59ClwentT1/jcbjEMA8ZxhFYqwv/tcH6z0QbWWvyUDyiLApv3zd2HmUMXHUp0XYeiKCJQ3InyPH949acOU+Ijy1BVFQ6HA3bG4Hg8QmsN7z2yLIvt9NRhSoobATZ1E90IQNzZL4vWeyil0Pp20eViH0q/OVdz3/dR3ns+n8/s6prHceSqcr/248OfMq2h0hpK6TiXfbPbxbXU8a8aFgIVp/L6Uw3D0IUQ4pjWaY+Zu/l50Tf+M/joJaXThwAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Tree Data Structure\"\n        title=\"Tree Data Structure\"\n        src=\"/static/f4b9e679cd93f7c4bc67da8d76038fa1/1994c/sibling.png\"\n        srcset=\"/static/f4b9e679cd93f7c4bc67da8d76038fa1/56d15/sibling.png 200w,\n/static/f4b9e679cd93f7c4bc67da8d76038fa1/d9f49/sibling.png 400w,\n/static/f4b9e679cd93f7c4bc67da8d76038fa1/1994c/sibling.png 604w\"\n        sizes=\"(max-width: 604px) 100vw, 604px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<h3 id=\"creating-a-node-class\" style=\"position:relative;\"><a href=\"#creating-a-node-class\" aria-label=\"creating a node class permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Creating a Node class</h3>\n<h4 id=\"directions\" style=\"position:relative;\"><a href=\"#directions\" aria-label=\"directions permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Directions</h4>\n<p>Create a <del>Node</del> class. The constructor should accept an argument that gets assigned to the <del>data</del> property and initialize an empty array for storing children. The <del>Node</del> class should have two methods: <del>add</del> &#x26; <del>remove</del>.</p>\n<p>Given some data, the <del>add()</del> method should create a new node and add it to the current node’s <del>children</del> array.</p>\n<p>Given some data, the <del>remove()</del> method should look at each child of the current node and remove any node with <del>data === data</del>.</p>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"js\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"1\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">class</span><span class=\"mtk1\"> </span><span class=\"mtk9\">Node</span><span class=\"mtk1\"> {</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"2\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">  </span><span class=\"mtk10\">constructor</span><span class=\"mtk1\">(</span><span class=\"mtk3 mtki\">data</span><span class=\"mtk1\">) {</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"3\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">    </span><span class=\"mtk9 mtkb\">this</span><span class=\"mtk1\">.</span><span class=\"mtk7\">data</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk3\">data</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"4\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">    </span><span class=\"mtk9 mtkb\">this</span><span class=\"mtk1\">.</span><span class=\"mtk7\">children</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> []</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"5\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">  }</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"6\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"7\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">  </span><span class=\"mtk6\">add</span><span class=\"mtk1\">(</span><span class=\"mtk3 mtki\">data</span><span class=\"mtk1\">) {</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"8\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">    </span><span class=\"mtk9 mtkb\">this</span><span class=\"mtk1\">.</span><span class=\"mtk3\">children</span><span class=\"mtk1\">.</span><span class=\"mtk6\">push</span><span class=\"mtk1\">(</span><span class=\"mtk10\">new</span><span class=\"mtk1\"> </span><span class=\"mtk9\">Node</span><span class=\"mtk1\">(</span><span class=\"mtk3\">data</span><span class=\"mtk1\">))</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"9\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">  }</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"10\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"11\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">  </span><span class=\"mtk6\">remove</span><span class=\"mtk1\">(</span><span class=\"mtk3 mtki\">data</span><span class=\"mtk1\">) {</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"12\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">    </span><span class=\"mtk9 mtkb\">this</span><span class=\"mtk1\">.</span><span class=\"mtk7\">children</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk9 mtkb\">this</span><span class=\"mtk1\">.</span><span class=\"mtk3\">children</span><span class=\"mtk1\">.</span><span class=\"mtk6\">filter</span><span class=\"mtk1\">(</span><span class=\"mtk3 mtki\">node</span><span class=\"mtk1\"> </span><span class=\"mtk10\">=&gt;</span><span class=\"mtk1\"> </span><span class=\"mtk3\">node</span><span class=\"mtk1\">.</span><span class=\"mtk7\">data</span><span class=\"mtk1\"> </span><span class=\"mtk10\">!==</span><span class=\"mtk1\"> </span><span class=\"mtk3\">data</span><span class=\"mtk1\">)</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"13\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">  }</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"14\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">}</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"15\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"16\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">const</span><span class=\"mtk1\"> </span><span class=\"mtk3\">node</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk10\">new</span><span class=\"mtk1\"> </span><span class=\"mtk9\">Node</span><span class=\"mtk1\">(</span><span class=\"mtk7\">10</span><span class=\"mtk1\">)</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"17\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"18\"></span><span class=\"grvsc-source\"><span class=\"mtk9\">console</span><span class=\"mtk1\">.</span><span class=\"mtk6\">log</span><span class=\"mtk1\">(</span><span class=\"mtk3\">node</span><span class=\"mtk1\">)</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"19\"></span><span class=\"grvsc-source\"><span class=\"mtk4 mtki\">// { data: 10, children: [] }</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"20\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"21\"></span><span class=\"grvsc-source\"><span class=\"mtk3\">node</span><span class=\"mtk1\">.</span><span class=\"mtk6\">add</span><span class=\"mtk1\">(</span><span class=\"mtk7\">20</span><span class=\"mtk1\">)</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"22\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"23\"></span><span class=\"grvsc-source\"><span class=\"mtk3\">node</span><span class=\"mtk1\">.</span><span class=\"mtk6\">add</span><span class=\"mtk1\">(</span><span class=\"mtk7\">30</span><span class=\"mtk1\">)</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"24\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"25\"></span><span class=\"grvsc-source\"><span class=\"mtk9\">console</span><span class=\"mtk1\">.</span><span class=\"mtk6\">log</span><span class=\"mtk1\">(</span><span class=\"mtk3\">node</span><span class=\"mtk1\">)</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"26\"></span><span class=\"grvsc-source\"><span class=\"mtk4 mtki\">// {data: 10, children: [ { data: 20, children: [] }, { data: 30, children: [] } ]}</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"27\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"28\"></span><span class=\"grvsc-source\"><span class=\"mtk3\">node</span><span class=\"mtk1\">.</span><span class=\"mtk6\">remove</span><span class=\"mtk1\">(</span><span class=\"mtk7\">30</span><span class=\"mtk1\">)</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"29\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"30\"></span><span class=\"grvsc-source\"><span class=\"mtk9\">console</span><span class=\"mtk1\">.</span><span class=\"mtk6\">log</span><span class=\"mtk1\">(</span><span class=\"mtk3\">node</span><span class=\"mtk1\">)</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"31\"></span><span class=\"grvsc-source\"><span class=\"mtk4 mtki\">// { data: 10, children: [ { data: 20, children: [] } ] }</span></span></span></code></pre>\n<h3 id=\"creating-a-tree-class\" style=\"position:relative;\"><a href=\"#creating-a-tree-class\" aria-label=\"creating a tree class permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Creating a Tree class</h3>\n<h3 id=\"directions-1\" style=\"position:relative;\"><a href=\"#directions-1\" aria-label=\"directions 1 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Directions</h3>\n<p>Create a <del>Tree</del> class. The constructor should initialize a <del>root</del> property to <del>null</del>.</p>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"js\" data-index=\"1\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"1\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">class</span><span class=\"mtk1\"> </span><span class=\"mtk9\">Tree</span><span class=\"mtk1\"> {</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"2\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">  </span><span class=\"mtk10\">constructor</span><span class=\"mtk1\">() {</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"3\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">    </span><span class=\"mtk9 mtkb\">this</span><span class=\"mtk1\">.</span><span class=\"mtk7\">root</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk5\">null</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"4\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">  }</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"5\"></span><span class=\"grvsc-source\"><span class=\"mtk1\">}</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"6\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">const</span><span class=\"mtk1\"> </span><span class=\"mtk3\">tree</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk10\">new</span><span class=\"mtk1\"> </span><span class=\"mtk9\">Tree</span><span class=\"mtk1\">()</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"7\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"8\"></span><span class=\"grvsc-source\"><span class=\"mtk3\">tree</span><span class=\"mtk1\">.</span><span class=\"mtk7\">root</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk3\">node</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"9\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"10\"></span><span class=\"grvsc-source\"><span class=\"mtk9\">console</span><span class=\"mtk1\">.</span><span class=\"mtk6\">log</span><span class=\"mtk1\">(</span><span class=\"mtk3\">tree</span><span class=\"mtk1\">)</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"11\"></span><span class=\"grvsc-source\"><span class=\"mtk4 mtki\">// Tree { root: { data: 10, children: [ { data: 20, children: [] } ] } }</span></span></span></code></pre>\n<hr>\n<p><strong>You might be interested in the following blog posts:</strong></p>\n<h6 id=\"learn-how-to-implement-a-binary-search-tree-in-my-blog-post-here\" style=\"position:relative;\"><a href=\"#learn-how-to-implement-a-binary-search-tree-in-my-blog-post-here\" aria-label=\"learn how to implement a binary search tree in my blog post here permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Learn how to implement a binary search tree in my blog post <a href=\"https://hemanta.io/implementing-binary-search-tree-in-javascript/\">here</a>.</h6>\n<h6 id=\"learn-breadth-first--depth-first-traversal-of-a-tree-data-structure-in-my-blog-posts-here--here\" style=\"position:relative;\"><a href=\"#learn-breadth-first--depth-first-traversal-of-a-tree-data-structure-in-my-blog-posts-here--here\" aria-label=\"learn breadth first  depth first traversal of a tree data structure in my blog posts here  here permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Learn breadth-first &#x26; depth-first traversal of a tree data structure in my blog posts <a href=\"https://hemanta.io/breadth-first-traversal-of-a-tree-data-structure/\">here</a> &#x26; <a href=\"https://hemanta.io/depth-first-traversal-of-a-tree-data-structure/\">here</a>.</h6>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    position: relative;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n    line-height: 1.4;\n  }\n  \n  .grvsc-code {\n    display: table;\n  }\n  \n  .grvsc-line {\n    display: table-row;\n    box-sizing: border-box;\n    width: 100%;\n    position: relative;\n  }\n  \n  .grvsc-line > * {\n    position: relative;\n  }\n  \n  .grvsc-gutter-pad {\n    display: table-cell;\n    padding-left: 0.75rem;\n    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);\n  }\n  \n  .grvsc-gutter {\n    display: table-cell;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    user-select: none;\n  }\n  \n  .grvsc-gutter::before {\n    content: attr(data-content);\n  }\n  \n  .grvsc-source {\n    display: table-cell;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-source:empty::after {\n    content: ' ';\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    user-select: none;\n  }\n  \n  .grvsc-gutter + .grvsc-source {\n    padding-left: 0.75rem;\n    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);\n  }\n  \n  /* Line transformer styles */\n  \n  .grvsc-has-line-highlighting > .grvsc-code > .grvsc-line::before {\n    content: ' ';\n    position: absolute;\n    width: 100%;\n  }\n  \n  .grvsc-line-diff-add::before {\n    background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));\n  }\n  \n  .grvsc-line-diff-del::before {\n    background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));\n  }\n  \n  .grvsc-line-number {\n    padding: 0 2px;\n    text-align: right;\n    opacity: 0.7;\n  }\n  \n  .synthwave-84 { background-color: #262335; }\n  .synthwave-84 .mtkb { font-weight: bold; }\n  .synthwave-84 .mtki { font-style: italic; }\n  .synthwave-84 .mtk10 { color: #FEDE5D; }\n  .synthwave-84 .mtk1 { color: #FFFFFF; }\n  .synthwave-84 .mtk9 { color: #FE4450; }\n  .synthwave-84 .mtk3 { color: #FF7EDB; }\n  .synthwave-84 .mtk7 { color: #2EE2FA; }\n  .synthwave-84 .mtk12 { color: #FFFFFFEE; }\n  .synthwave-84 .mtk6 { color: #36F9F6; }\n  .synthwave-84 .mtk4 { color: #848BBD; }\n  .synthwave-84 .mtk5 { color: #F97E72; }\n  .synthwave-84 .grvsc-line-highlighted::before {\n    background-color: var(--grvsc-line-highlighted-background-color, rgba(255, 255, 255, 0.1));\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, rgba(255, 255, 255, 0.5));\n  }\n</style>","frontmatter":{"title":"Implementing a Tree Data Structure in JavaScript","date":"2021-07-25"}}},"pageContext":{"slug":"/implementing-a-tree-data-structure-in-javascript/","prev":{"fields":{"slug":"/an-introduction-to-recursion/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/what-is-a-javascript-expression/"},"frontmatter":{"modules":null}}}},
    "staticQueryHashes": ["3159585216"]}