Ordem de Declaração e Chamada de Funções em JavaScript

Ordem de Declaração e Chamada de Funções em JavaScript

Ao longo do curso de Lógica de Programação da Alura, deparei-me com uma situação intrigante que envolve a ordem de declaração e chamada de funções em JavaScript. Neste artigo, compartilho minha experiência ao testar o código abaixo e esclareço a importância da sequência correta ao lidar com funções.

txtToElement('h1', 'Hora do desafio');
txtToElement('p', 'Escolha um número de 0 a 10:');

function txtToElement(tag, txt) {
    document.querySelector(tag).innerHTML = txt;
}

function verificarChute() {
    document.getElementsByClassName('');
}

No código acima, duas ações são realizadas. Primeiro, há a chamada da função txtToElement que tem a responsabilidade de atualizar o conteúdo de elementos HTML com base nos parâmetros fornecidos. Em seguida, temos uma função chamada verificarChute que parece estar incompleta.

O ponto central de reflexão aqui é a ordem em que as funções são declaradas e chamadas. No JavaScript, a ordem é crucial, e isso se aplica tanto à declaração quanto à chamada de funções.

A Ordem Importa?

A ordem em que você declara e chama funções no JavaScript é crucial, mas ambas as opções são válidas com algumas considerações. Aqui estão os dois cenários:

• Declaração Antes da Chamada:

function txtToElement(tag, txt) {
    document.querySelector(tag).innerHTML = txt;
}

function verificarChute() {
    document.getElementsByClassName('');
}

txtToElement('h1', 'Hora do desafio');
txtToElement('p', 'Escolha um número de 0 a 10:');

Neste caso, você declara as funções antes de chamá-las. Essa abordagem é a mais comum e é recomendada por muitos desenvolvedores. Permite que o interpretador JavaScript conheça as funções antes de executar o código. É considerada uma boa prática e é mais legível.

• Chamada Antes da Declaração (Hoisting):

txtToElement('h1', 'Hora do desafio');
txtToElement('p', 'Escolha um número de 0 a 10:');

function txtToElement(tag, txt) {
    document.querySelector(tag).innerHTML = txt;
}

function verificarChute() {
    document.getElementsByClassName('');
}

O JavaScript usa um comportamento chamado "hoisting", que eleva as declarações de função para o topo do escopo antes da execução do código. Portanto, mesmo se você chamar a função antes de declará-la, o JavaScript irá tratá-la como se tivesse sido declarada no topo. No entanto, isso pode ser confuso e menos intuitivo, por isso geralmente é recomendável evitar esse estilo.

Recomendação

A recomendação geral é declarar as funções antes de chamá-las. Isso torna o código mais claro e fácil de entender para você e outros desenvolvedores que possam ler seu código no futuro. O código é lido de cima para baixo, e seguir essa ordem ajuda a criar uma narrativa lógica.