File Explorer Tree Data Structure in JavaScript

File Explorer Tree Data Structure in JavaScript

The tree data structure is the foundation of a file explorer. Here is how to model, traverse, and manipulate it.

Modeling the Tree

const tree = {
  name: "project",
  type: "folder",
  children: [
    { name: "package.json", type: "file" },
    {
      name: "src",
      type: "folder",
      children: [
        { name: "index.js", type: "file" },
        {
          name: "components",
          type: "folder",
          children: [
            { name: "App.js", type: "file" },
            { name: "Header.js", type: "file" },
          ],
        },
      ],
    },
    { name: "public", type: "folder", children: [{ name: "index.html", type: "file" }] },
  ],
};

Traversing the Tree (DFS)

function traverse(node, callback, depth = 0) {
  callback(node, depth);
  if (node.children) {
    node.children.forEach((child) => traverse(child, callback, depth + 1));
  }
}

traverse(tree, (node, depth) => {
  console.log("  ".repeat(depth) + node.type + ": " + node.name);
});

Finding a Node

function findNode(node, name) {
  if (node.name === name) return node;
  if (node.children) {
    for (const child of node.children) {
      const found = findNode(child, name);
      if (found) return found;
    }
  }
  return null;
}

Adding a Node

function addNode(parent, newNode) {
  if (!parent.children) parent.children = [];
  parent.children.push(newNode);
}

Deleting a Node

function deleteNode(parent, name) {
  if (!parent.children) return;
  const index = parent.children.findIndex((c) => c.name === name);
  if (index !== -1) parent.children.splice(index, 1);
}

Counting Files and Folders

function countNodes(node) {
  let files = 0, folders = 0;
  traverse(node, (n) => {
    if (n.type === "file") files++;
    else folders++;
  });
  return { files, folders };
}

The Takeaway

Tree operations: model (nested objects with children), traverse (recursive DFS), find (recursive search), add (push to parent's children), delete (splice from parent's children), and count (traverse and tally). These are the fundamental operations for working with tree data in a file explorer.