Tree Data + Recursion in JavaScript

Lessons learned building an ASCII tree folder generator

Alex Zito
Geek Culture

--

I recently wrote a script that generates a text-based ASCII folder structure based on a bullet list. This was something that I had looked for before while I was writing documentation, but I couldn’t find it so I thought that I’d write it myself. Because a picture is worth a thousand words, here is what the final product looks like:

link: https://xqgvz.csb.app/

The program takes a list of strings with hashes to represent folder depth, and then returns an ASCII folder tree. The exercise brought me closer to a number of programming paradigms that I don’t get to use very frequently — especially preprocessing data, tree data structures, and recursive functions.

Generating a Data Tree

In my day job I almost never use any data structure other than relatively shallow list data — an array of customers, an array of businesses, a list of tags or topics. I think that’s likely the case for many frontend devs. The data for this script was different — a heavily nested tree, with child-parent connections between the nodes.

In my day job I almost never use any data structure other than relatively shallow list data — an array of customers, an array of businesses, a list of tags or topics.

--

--

Alex Zito
Geek Culture

Software Developer + Product Manager. Interested in Travel, Culture, Economics and the Internet. Join Medium: https://tinycode.medium.com/membership