-2
I was watching 1 video of a calculator project in javascript, and I saw that prof first declared a global variable with no value, and through a click function, passed a value to the variable instead of creating the variable within the function window. What is the meaning of this action? Wouldn’t it be better to create the variable in the function window? Here’s the js code. I put 2 arrows to try to help where the focus of the question is. Thank you very much:
const teclas = document.querySelectorAll('[id*=tecla');
const operadores = document.querySelectorAll('[id*=operador]');
const display = document.querySelector('#display');
var numeroNovo = true;
var numeroAntigo; //VARIAVEL GLOBAL SEM VALOR DO PROF <================
const calculadora = {
inserirNumero:(evento)=>{
calculadora.atualizarDisplay(evento.target.textContent);
},
inserirOperador:(evento)=>{
if(!numeroNovo){
calculadora.calcular(numeroAntigo);
numeroNovo = true;
operador = evento.target.textContent;
console.log("NumeroAntigo: "+numeroAntigo)
numeroAntigo = display.textContent; //ACRESCENTOU UM VALOR AQUI <===========
}
},
calcular:(numeroAntigo)=>{
var numeroAtual = display.textContent;
},
atualizarDisplay:(texto)=>{
if(numeroNovo){
display.innerHTML = texto;
numeroNovo = false;
}else{//numeroNovo = false
display.innerHTML += texto;
}
}
};
teclas.forEach(tecla => {
tecla.addEventListener("click", calculadora.inserirNumero);
});
operadores.forEach(operador =>{
operador.addEventListener("click", calculadora.inserirOperador);
})
if declaring a variable in the local context of the method, when the method terminates the value of the variable will be lost, as the variable in two methods "maybe" has declared in the public scope to reuse, but as it passes by parameter could be local, but looking at the code it was not clear
– Ricardo Pontual
This answers your question? How Closures work in Javascript?
– Rafael Tavares
There’s something called scope, that basically defines where each variable "exists" and can be accessed by other parts of the code. See more details here and here. In this case, if you declare the variable within a function, it is local to that function and cannot be accessed outside of it. Ex: https://ideone.com/YilCRS - Then probably the intention was this, since it seems to print on the console the value that the display had previously, but as the display is changed in another function, the previous value has to "survive" the calls of each one.
– hkotsubo
Since you don’t have HTML, you can’t test it properly, but you tested it by declaring the variable within the function? Its value "would be lost" after that
inserirOperador
was called, and you could not have the previous display value stored there. I do not know also if the code is incomplete, since the functioncalcular
receives thenumeroAntigo
as a parameter, but do not use it for anything (other than the variableoperador
, which is also set but is not used for anything after).– hkotsubo
Apart from the use of Arrow functions, that the documentation itself recommends that it not be used as methods of an object. But anyway, I guess that’s it
– hkotsubo