Programação Funcional com Javascript — Recursão
Tags: webdev, javascript, programaçãofuncional
Published: 2023-09-08 14:59:23

---
title: Programação Funcional com Javascript — Recursão
published: true
date: 2018-11-08 12:04:50 UTC
tags: webdev,javascript,programaçãofuncional
canonical_url: 
---

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.