Walk a menu tree breadth-first and depth-first

A navigation menu, a comment thread or a file tree can be walked two ways. Breadth-first visits everything on one level before descending, which is what you want when rendering a menu level by level or finding the nearest match. Depth-first follows one branch to the bottom first, which is what you want when flattening for display.

Implement two functions over the same node shape { id, children }, where children is an array of nodes and may be missing. Both take roots, an array of top-level nodes, and both return an array of id values; both return [] for an empty array of roots.

breadthFirst(roots) returns ids level by level: every root in array order first, then every child of those roots in the same order their parents were visited, then every grandchild, and so on. depthFirst(roots) returns ids in pre-order: each node immediately before its own descendants, with siblings in array order.

const tree = [
  { id: "file", children: [{ id: "new" }, { id: "open" }] },
  { id: "edit", children: [{ id: "undo" }] },
];
breadthFirst(tree);
// ["file", "edit", "new", "open", "undo"]

const tree = [
  { id: "file", children: [{ id: "new" }, { id: "open" }] },
  { id: "edit", children: [{ id: "undo" }] },
];
depthFirst(tree);
// ["file", "new", "open", "edit", "undo"]