Fala, pessoal!

Depois de algum tempo, estamos de volta. No artigo de hoje iremos tratar e tentar explanar de forma simples e objetiva, o que é a recursão e como aplicá-la usando JavaScript.

Recursão

Dizemos que a recursão é um método para a solução de um determinado problema grande, que pode ser quebrado em vários pequenos problemas, até ser pequeno o suficiente para ser resolvido de forma simples. A recursão é dada quando uma função chama a si mesmo. Com isso, podemos escrever soluções elegantes que seriam meio cabulosas de programar de outra forma.

O problema

Seguindo a linha de pensamento dos artigos anteriores, vamos imaginar que temos o seguinte problema:

O cliente chega pra você e diz que precisa de um programa similar ao famoso Dropbox, um sistema de gerenciamento de arquivos, e na primeira entrega ele precisa que o sistema apenas faça a criação de pastas e subpastas e precisamos listá-las, contendo arquivos ou subpastas.

A solução

Em um primeiro momento, para quem não é familiarizado ou não conhece a técnica de recursão, o que vem na mente para resolver o problema seria usar n laços de repetições, mas a solução mais elegante para esse problema específico se dá pelo uso de recursão.

Vamos imaginar que, para resolver o problema dessa primeira entrega  precisamos construir uma árvore com esses diretórios e subdiretórios. Pensando que nosso sistema será o web, vamos criar elementos html através de nossa função recursiva. Usaremos a sintaxe e funcionalidades do ES6. Segue nosso código:

//estrutura de entrada
const folders = {
    folder: [{
        name: 'folder1',
        folder: [
            {
                name: 'folder2'
            },
            {
                name: 'folder3'
            },
            {
                name: 'folder4',
                folder: [
                    {
                        name: 'folder5'
                    },
                    {
                        name: 'folder'
                    }
                ]
            },
           {
                name: 'folder7'
          }
        ]
    }
  ]
}

//funcao para criar pastas e subpastas dado uma entrada
const createFolderTree = (treeFolders, container)=> { 
    treeFolders.map( folder => {
        const newContainer = document.createElement('div')
        const button = document.createElement('button')
        button.id = folder.name
        button.innerHTML = folder.name
        newContainer.appendChild(button)
        container.appendChild(newContainer)
        if(folder.folder) createFolderTree(folder.folder, newContainer) 
    })
}

//chamada da funcao
createFolderTree(folders.folder, document.querySelector('#folders'))

Com isso temos uma função recursiva que é chamada toda vez que encontra um nó chamado folder. Com isso ele cria um novo elemento div, e dentro desse elemento cria um botão representando nossa pasta.

É uma forma bem simples que podemos usar, por exemplo, na criação de menus.

Espero que tenha ficado claro o problema, aplicabilidade da técnica, e como isso é rico e torna nosso código melhor.