Understand JavaScript Synchronous vs Asynchronous

Question

I am new to JavaScript, Node.js in particular, and I have 2 functions that I am trying to execute. One gets data from a file and passes it to a list, and the other reads from that list in order to get one of the lines from the text file. My code works flawlessly, except the second function executes before the first, which is obviously a problem considering the second function needs information from the first in order to execute successfully.

let names = [];

function loadNames() {
  var reader = new LineReader("names.txt");
  reader.on("line", function (line) {
  names.push(line);
  console.log("length " + names.length)
  });
}

function getName() {
  console.log(names.length);
    for (var i = 0; i < names.length; i++) {
      var name = names[i];
      console.log("Loaded - " + name);
 }
  console.log("what is wrong with this thing?")
}

loadNames() getName()

Expected Output:

length 1
length 2
length 3
length 4
length 5
length 6
length 7
length 8
length 9
length 10
10
Loaded - 1
Loaded - 2
Loaded - 3
Loaded - 4
Loaded - 5
Loaded - 6
Loaded - 7
Loaded - 8
Loaded - 9
Loaded - 10
what is wrong with this thing?

Actual Output (besides everything in parenthesis):

0 (from getName -> console.log(names.length))
what is wrong with this thing? (from getName)
length 1 (from loadNames -> console.log("length" + names.length))
length 2 (from loadNames -> console.log("length" + names.length))
length 3 (from loadNames -> console.log("length" + names.length))
length 4 (from loadNames -> console.log("length" + names.length))
length 5 (from loadNames -> console.log("length" + names.length))
length 6 (from loadNames -> console.log("length" + names.length))
length 7 (from loadNames -> console.log("length" + names.length))
length 8 (from loadNames -> console.log("length" + names.length))
length 9 (from loadNames -> console.log("length" + names.length))
length 10 (from loadNames -> console.log("length" + names.length))

`console.log("Loaded - " + names);` <-- um, don't you want `name`, not `names` — epascarello, Dec 06 '17 at 01:45
So you order a pizza and what you are doing is doing is trying to eat the pizza before it is delivered. What you need to do is call your getName after the loadNames has make the asynchronous call. That is where promises or callbacks come into play. — epascarello, Dec 06 '17 at 01:49
https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron — epascarello, Dec 06 '17 at 01:51

score 0 · Answer 1 · answered Dec 06 '17 at 01:59

0

There's plenty of great resources on the web to understand the asynchronous nature of JavaScript.

For your specific problem, the library I think you're using offers a solution.

reader.on('end', function () {
    getName()
}

answered Dec 06 '17 at 01:59

DoloMike

499
6
15

Understand JavaScript Synchronous vs Asynchronous

1 Answers1