Executando verificação de segurança...
1

Geralmente eu uso uma função anônima pra fazer isso, ficaria mais ou menos assim:

(function(){
    const listaComObjetos = [];
    const nome = document.querySelector('.nome');
    const idade = document.querySelector('.idade');
    const peso = document.querySelector('.peso');
    const altura = document.querySelector('.altura');
    const form = document.querySelector('.form');
    const botao = document.querySelector('.botao');
    const resultado = document.querySelector('.resultado');
    
    function criaObjeto(nome,idade,peso,altura){
        return{
            nome:nome,
            peso:peso,
            idade:idade,
            altura:altura
        }
    };
    
    function recebeFormulario(e){
        e.preventDefault();

        let objeto = criaObjeto(nome.value,idade.value,peso.value,altura.value);
        listaComObjetos.push(objeto);
        console.log(listaComObjetos);
        
        resultado.innerHTML += `Nome: ${nome.value}, idade: ${idade.value}, peso: ${peso.value}, altura: ${altura.value} </br>`
    }

    form.addEventListener('submit', recebeFormulario)
})();

Quando vc define tudo de forma global, as variaveis no escopo global são acessíveis e possíveis de terem os valores alterados pelo console do navegador, as funções também são possíveis de serem executadas pelo console, por isso eu faço dessa forma.
Alguém comentou aqui sobre colocar um event listener pra que seja executado quando o carregamento da página for concluído, isso também é uma boa prática mas nem sempre vai ser necessário, geralmente só colocar o JS no final do body, exatamente antes de fechar a tag body () já vai ser suficiente pra que o js seja executado depois da renderização dos componentes HTML, a não ser que tenha algo atrazando a renderização.

Prefiro usar essa função anônima pq as funções que são definidas de forma global também podem ser executadas pelo console do navegador, é só digitar o nome, passar os parametros da forma que quiser e apertar enter que vai ser executado, mas se a função for anonima, isso garante que não tem como ela ser executada a não ser no carregamento da página, pois nada faz referencia a ela, e tudo que está dentro da função anônima só é acessível pela própria função.

Só um adendo: já usei isso pra pegar dados de um serviço grande, empresa famosa, que era pago e tinha um acesso limitado, aí quando chegava no limite só poderia ter acesso no dia seguinte, aí abri o console, mudei algumas variáveis e comecei a executar as funções e aí consegui ter acesso ilimitado (não vou falar a empresa pra não dar problema), depois o pessoal descobriu a falha e corrigiram.

Carregando publicação patrocinada...
1

Esse modelo de função eu ainda não conhecia, ela é definida e chamada automaticamente, é isso ? sobre utilizar funções pra envolver o escopo do programa, posso utilizar até mesmo como uma medida de seguranca para não deixar os códigos do sistema global ne ?

3

Aquele finalzinho alí ();

"chama a função"

javascript é meio maluco mesmo (e eu adoro)

Pra vc entender melhor:

Isso:

function meuPrograna(){
 📄
}

é igual a isso:

(function(){📄})();

Agora, se vc quer ver como seria um "programa" real, em node seria mais ou menos isso:

onst express = require('express')
const app = express();

//
// Biliotecas
//
require('./libs/cors')(app)
require('./libs/bodyParser')(app)
require('./libs/knex')(app)
require('./libs/auth')(app)
require('./libs/errors')(app)

//
// API
//
require('./api/hello')(app)
require('./api/usuarios')(app)

//
// start
//
require('./libs/start')(app)
1

faz sentido, mano. e sim, javascript é meio louco kskss mas to curtindo muito, mas ainda tô meio perdido e é muito massa ter um feedback desses como o seu. obrigado mesmo, maninho

2

Exatamente, a função é definida e executada logo em seguida automaticamente.

Todos os frameworks js que conheço geram o js final dessa forma, dentro dessa função anônima auto executada.

Pra entender melhor são dois parenteses ()(), dentro do primeiro vai a função anonima e o segundo faz com que a função dentro do primeiro seja executada (function(){})().

Quanto a segurança, sim, faz sentido pensar por esse lado também, mas sempre aliado com outras práticas