Technical Documentation Page - Build a Technical Documentation Page

Technical Documentation - create Tree in JS - FCC
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css" />

JS - Basic Tree Data Structure

Index

Tree Data Structure

A tree is a non hierarchical data structure in which the the information or value is represented by Tree Nodes and these nodes are connected by Edges.

Tree Terminologies
  • Node: A node is a entity which holds a value, an information, a pointer, etc.

    • Internal Node: A node which has at least one child
    • Leaf Node: A node which has no child or the last node in a tree branch

  • Edge: Edge is the link in between two nodes

  • Root Node: The entry point (usually represented by topmost node) of a tree is known as root node.

  • Height: Number of the edges in the longest path from root node to leaf node.

  • Degree: Degree of a node is the total number of branches of that node

Types of Tree

Tree is of 4 types:

  1. Binary Tree
  2. Binary Search Tree
  3. AVL Tree
  4. B-Tree
Tree Traversal

To perform any operation or to get a specific value, tree traversal algorithms are used. We can traverse tree in basically three following types:

  1. Preorder Traversal
  2. Inorder Traversal
  3. Post Traversal
Creating a Basic Tree

Here is an example of a tree which we are going to implement at last

a tree with 7 nodes Figure 1: An example of a tree

First we need to create the JS class

                                    $dy> class Tree {
                                    $dy>     // Tree defination will come here
                                    $dy> }
                                

A tree node contains value, left child and right child so let's go create that

                                    $dy> class Tree {
                                    $dy>     constructor(nodeValue, leftNode, rightNode) {
                                    $dy>         this.value = nodeValue;
                                    $dy>         this.leftNode = leftNode;
                                    $dy>         this.rightNode = rightNode;
                                    $dy>     }
                                    $dy> }
                                

Assign default parameter as null if user doesn't pass the pointer to the left or right node

                                    $dy> // Replace constructor signature with the following
                                    $dy> constructor(nodeValue = 0, leftNode = null, rightNode = null)
                                

Let's create a tree with three nodes

                                    $dy> // we need not pass left or right as default parameter are already there
                                    $dy> const left = new Tree('left');
                                    $dy> const right = new Tree('right');
                                    $dy> // here we need to pass the left and right node as parameter
                                    $dy> const root = new Tree('root', left, right);
                                

That's it, you have created the tree in above step and here is the complete code for a tree

                                    $dy> class Tree {
                                    $dy>     constructor(nodeValue, leftNode, rightNode) {
                                    $dy>         this.value = nodeValue;
                                    $dy>         this.leftNode = leftNode;
                                    $dy>         this.rightNode = rightNode;
                                    $dy>     }
                                    $dy> }
                                $dy> const node7 = new Tree(7);
                                $dy> const node6 = new Tree(6);
                                $dy> const node5 = new Tree(5);
                                $dy> const node4 = new Tree(4);
                                $dy> const node3 = new Tree(3, node6, node7);
                                $dy> const node2 = new Tree(2, node4, node5);
                                $dy> const root = new Tree(1, node2, node3);
                            </pre>
                        </code>
                    </div>
                </div>
                <div class="step">
                    <p>Here is the JSON of the tree we just created</p>
                    <div class="code-wrapper">
                        <code>
                            <pre>
                                $dy> {
                                $dy>     "value": 1,
                                $dy>     "leftNode": {
                                $dy>         "value": 2,
                                $dy>         "leftNode": {
                                $dy>             "value": 4
                                $dy>         },
                                $dy>         "rightNode": {
                                $dy>             "value": 5
                                $dy>         }
                                $dy>     },
                                $dy>     "rightNode": {
                                $dy>         "value": 3,
                                $dy>         "leftNode": {
                                $dy>             "value": 6
                                $dy>         },
                                $dy>         "rightNode": {
                                $dy>             "value": 7
                                $dy>         }
                                $dy>     }
                                $dy> }
                            </pre>
                        </code>
                    </div>
                </div>
            </div>
        </section>
        <section class="main-section" id="Tree_Application">
            <header class="section-header">Tree Application</header>
            <div class="section-content">
                <ul>
                    <li>In searching algorithm, specially in heap sort</li>
                    <li>HTML DOM is a tree</li>
                    <li>Compilers uses the syntax tree to validate the syntax of a code</li>
                </ul>
            </div>
        </section>
    </main>
</div>

<script>
    // fixing the test suite for the project
    const projectName = 'technical-docs-page';

    /**
     * > can assign the whole PRE TAG TEXT through JS
     * > can also use <br /> and &nbsp; to create the pre tag
     * 
     * here I am using $dy> to remove the whiteSpace
     * > it won't remove the whiteSpace from the user entered code
     * > it removes only HTML formatter pre tag issues
     */

    const allPreTag = document.querySelectorAll('pre');
    for(let pre of allPreTag) {
        let text = pre.innerText;
        const whiteSpaceLength = text.length - text.trimStart().length;
        let replaceString = "$dy>";
        for(let i = 0; i < whiteSpaceLength; i++) {
            replaceString = " " + replaceString;
        }
        while(text.indexOf(replaceString) !== -1) {
            text = text.replace(replaceString, "");
        }
        pre.innerText = text;
    }
</script>
<!-- Remove below comment to add the test-suite script -->
<!-- <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script> -->

Welcome to FCC Forum community @kushalparikh.22.ce !

Please tell us what the problem is in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

Happy coding!