JavaScript: O que é callstack?
Tags: webdev, javascript, node, algorithms
Published: 2023-01-19 19:09:03

Para podermos evoluir e irmos além do básico é importante conhecer como as linguagens de programação funcionam, o que aqui no caso é o JavaScript. Então para isso eu pretendo fazer alguns posts falando de uma forma mais profunda sobre os mecanismos dessa linguagem de programação. Hoje eu gostaria de começar falando sobre a "callstack".

Antes de começar é importante deixar claro que a callstack não, é algo que existe apenas no JavaScript, é um mecanismo usado por outras linguagens também. 

Outra coisa importante é que você conheça o conceito de pilha que é ensinado na matéria de estrutura de dados. Caso não conheça ainda recomendo ler [este artigo](https://dev.to/cristuker/estrutura-de-dados-o-que-e-uma-pilha-296p) onde eu explico de forma simples o conceito de pílha na programação.

## Qual é a sua função?

O objetivo da callstack é manter o controle do ponteiro e dizer para a função atual, para qual função deve ser retornado o controle após o fim da sua execução. Ou seja, ela serve para dizer o que o computador deve executar após o fim da função atual. Simples, né? Agora vamos para algo mais prático.

## Exemplo

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6kw7493114rtcw6wy29q.png)


Vamos considerar esse código acima para exemplo. Nele eu simulo uma chamada a um serviço que chama um repository para simular um banco de dados.

Quando começamos a execução do nosso programa a nossa função `main` é adicionada a callstack. Logo a nossa callstack ficará assim:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yoj5fb5tdsn7maw5x6je.png)

Em seguida nós chamamos a função `getServiceUsuarios` que é o serviço que chama o repository e a função de formatação das informações do usuário. Então teremos o seguinte cenário: 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3oygetevhmnl307tpua5.png)

Agora nós vamos chamar a função `repositoryUsuarios` e logo em seguida a função de formatação. Porém, as duas nunca estarão juntas na callstack, pois uma é chama após a execução da outra. Então quando eu chamo a função do repository eu tenho a seguinte situação:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5uqciofznx9wsyl8cm82.png)

Então ela sairá da stack e dará espaço a função `formatarUsuarios` que por fim vai retornar os usuários formatados e sair da callstack também. E aqui as funções começam uma a uma, sair da callstack retornando os seus resultados. Até que chegam na função `main` que mostra o resultado na tela e finaliza o programa. Assim a stack ficará vazia novamente.

Outro momento em que a callstack está presente no dia a dia é na mensagem de erro. Forcei a minha função `repositoryUsuarios` a jogar um erro e olha só, ali está a callstack do node com as funções que foram chamadas até chegar na função em que ocorreu o erro. E também podermos ver até mesmo os módulos internos do node que foram chamados, para a execução do nosso programa.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/exx3yaadg2f0sa6nrc00.png)


Muito obrigado por ler 🙃

[Links úteis](https://bento.me/cmsdev)