Programação Funcional com Javascript — Recursão

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 aplica-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 cabulosos 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 pasta e subpastas e precisamos lista-las, contendo arquivos ou subpastas.

A Solução

Em 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, seriam 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. Vamos usar 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 e aplicabilidade da técnica e como isso é rico e torna nosso código melhor.