Javascript | Callback and null variable

Question

I'm writting a small code to log a variable from a callback. So far my code looks like this.

function Run() {
  GetNumber();
  ShowNumber(); //--> (1)
}

Run();

var numero = null;

function GetNumber() {
  numero = 12;

  setTimeout(function() {
    ShowNumber(); //--> (2)
  }, 2000);
}

function ShowNumber() {
  console.log(numero);
}

Notice the (1) and (2). When (1) is called, the log is "12" as expected. But when (2) is called after 2 seconds, it doesn't work and throws this in the console:

null

I've tried adding bind(this) to the annonymous callback but still, the same error. Why is this happening?.

First question. Does `document.querySelector('.MyNavClass')` match anything? — Taplar, Dec 05 '18 at 23:04
I'm NOT surprised it isn't working at 2 -- I'm wondering why it *is* working at 1. using document.querySelector() doesn't give the element an open function. — Snowmonkey, Dec 05 '18 at 23:05
https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element — epascarello, Dec 05 '18 at 23:06
Please post a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) — Ele, Dec 05 '18 at 23:07
Ignoring that the element most likely will not have an open function, unless a plugin is involved, the null issue is 99% related to the element not being found. http://jsfiddle.net/frco1dqx/ — Taplar, Dec 05 '18 at 23:07
@Taplar if the element isn't found, how would the call at (1) work then? — user247702, Dec 05 '18 at 23:09
Ok, edited to show a much simpler reproduction of the issue. — David Melara, Dec 05 '18 at 23:09
What do you mean, how would it work? It would make the call and get the null pointer inside there. Both #1 and #2 are going to result in the null pointer. — Taplar, Dec 05 '18 at 23:09
@Taplar but OP says that the call at (1) works, "the sidenav opens as expected". — user247702, Dec 05 '18 at 23:10
Well, lets ditch that discussion because the question just changed from selecting an element all together..... — Taplar, Dec 05 '18 at 23:11
LOL, this is a case of using things before the variables are declared!!! — epascarello, Dec 05 '18 at 23:14
Yeah was that, I've been using JS for years but always using object and (this.variable). But now I'm required to do a program without objects and well, you see what happened LOL — David Melara, Dec 05 '18 at 23:17

score 2 · Accepted Answer · answered Dec 05 '18 at 23:14

2

This issue is the order in which you declare your var.

//declare your variable before the run method, so that when the numero
//is changed inside the GetNumber method, it will change this variable
//declaring it after the run, makes it set it back to null after the run
//finishes.
var numero = null;

function Run() {

  GetNumber();
  ShowNumber(); //--> (1)
}

Run();



function GetNumber() {
  numero = 12;

  setTimeout(function() {
    ShowNumber(); //--> (2)
  }, 2000);
}

function ShowNumber() {
  console.log(numero);
}

You could also declare it right before Run(); and it would work as well.

answered Dec 05 '18 at 23:14

Taplar

24,246
4
18
33

Wow i've never thought of a scenario like this. It has never happened to me. Good catch! – Aravindan Ve Dec 05 '18 at 23:18
Thank you so much. I was used to the this.variables, so I never knew until now that declaration order is important when not using this. – David Melara Dec 05 '18 at 23:20

score 1 · Answer 2 · answered Dec 05 '18 at 23:16

1

The problem here is hoisting and variables being declared as globals. Moving the var before everything fixes your issue.

Your code basically looks like this when it runs.

var numero = 12;
console.log(numero)
numero = null;
console.log(numero)

So when you change the code order like this:

var numero = null;

function Run() {

  GetNumber();
  ShowNumber(); //--> (1)
}

Run();


function GetNumber() {
  numero = 12;

  setTimeout(function() {
    ShowNumber(); //--> (2)
  }, 2000);
}

function ShowNumber() {
  console.log(numero);
}

answered Dec 05 '18 at 23:16

epascarello

185,306
18
175
214

One minute late, but yeah, that was the problem. Thank you!. – David Melara Dec 05 '18 at 23:24
actually one minute ahead in the comments... lol I really do not care about the imaginary points. I would of been same time if I did not go back and add the explaination. :) – epascarello Dec 05 '18 at 23:39

Javascript | Callback and null variable

2 Answers2