0

I have a javascript function that calls a callback function on an event, where values from the DOM are read out.

I'm using a variable that appears nowhere else in the script, but it has values directly after being created - I already tried changing the name of the variable, but to no avail.

document.getElementById("myButton").onmouseenter = function() {
    var myVariable = new Array()                                                       
    console.log(myVariable)

what happens, is that the console.log directly after initializing the function already shows values:

[]
333: NaN
427: 0.1
length: 428
__proto__: Array(0

this only happens inside the callback function. I'm aware that callbacks can not always run sequentially, but how do i work around that in this example? I run into the same problem if i declare the variable outside of the callback function.

stemiwe
  • 11
  • 1
  • This is somewhat confusing `console` behavior. Your array doesn't have the values immediately (of course), which is why you see `[]` for the summary line in the console. But *later*, when you expand that line in the console, the values that are there **then** are shown to you, because the console keeps a live reference to the array object, and looks at its contents when you click the expand button. (In Chrome, if you hover the little `[i]` next to the summary when you've expanded it, it shows the message *"Value below was evaluated just now."*) – T.J. Crowder Jan 13 '21 at 12:11
  • Side note: Instead of `new Array()`, consider using `[]`. When you use `new Array`, the JavaScript engine has to traverse the scope chain to make sure that `Array` hasn't been shadowed, then execute the function (which then has to look at the arguments supplied to see if it has to do something other than just creating the array). In contrast, `[]` can't be shadowed and doesn't require a function call. – T.J. Crowder Jan 13 '21 at 12:13
  • thanks for clearing this up, so the problem has to be elsewhere, i ll adjust my debugging console commands – stemiwe Jan 13 '21 at 12:15
  • is it generally better to declare all variables outside of the callback, or declare the ones only used inside the callback function inside? or it doesn't matter? – stemiwe Jan 13 '21 at 12:17
  • thing is, I still have no clue how NaN gets into this array. I'm adding values to it inside a loop, but every single value I add is a number – stemiwe Jan 13 '21 at 12:20
  • 1
    finally found out the problem lies later in the script - my incorrect assumption on how the console.log works for arrays held me back all that time. thanks a ton for clearing that up! – stemiwe Jan 13 '21 at 12:23
  • I'm glad you got it sorted out! *"is it generally better to declare all variables outside of the callback, or declare the ones only used inside the callback function inside?"* My general guideline, for what it's worth, is to always declare variables in the *innermost* scope possible. So if you only use it in the callback, declare it in the callback. Happy coding! – T.J. Crowder Jan 13 '21 at 12:34

0 Answers0