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.