array.length is zero, but the array has elements in it [duplicate]

Question

I'm currently in the process practicing using electron, but I'm quite new with javascript and I've come across a problem which has me completely baffled. I have the following code:

    function getPaths() {       var dirPath = document.getElementById("mdir").innerHTML;       var filePaths = [];       fs.readdir(dirPath, function(err, dir) {         for(var i = 0, l = dir.length; i < l; i++) {           var filePath = dir[i];           filePaths.push(dirPath + "/" + filePath);         }       });       console.log(filePaths);       console.log(filePaths.length);     } 

Which is supposed to look into a directory defined by dirPath, then it loops through and obtains the full path of all files in that directory. It appends them to an array, and then at the bottom, it logs the array to the console, followed by the length of the array. What is baffling me is that given that code, the array logs to the console like expected, but then the console logs zero as the length. My current thinking is that it's got something to do with scope, but that doesn't make sense because I'm declaring the array, filePaths in the function above the one that's running. Unless I've missed something. Could anyone point out what I'm doing wrong?

Answer 1

readdir is asynchronous. It won't get the results right away. You should use the filePaths inside the callback. The only reason why the console shows the value is because the console evaluates the array when you unfold it.

When you press the little arrow on the left, put the mouse on the i box on the right. What happens is that the console keeps a reference to the array, so when the user unfolds the array it then shows the current value of the array. But when you log filePaths.length the array is empty because readdir didn't finish reading yet, that's why you get 0. But by the time you open the console and press that arrow, readdir will have already done reading and the console will print the current value of the array (after it's been filled).

Example to demonstrate the problem: (not a solution, it's just to understand what is really happening)

Open the browser console and try this code and see what happens:

var arr = [];  setTimeout(function() {   arr.push(1, 2, 3); }, 5000);  console.log(arr.length);  console.log(arr); 

Here the array and it's length are both logged before the array is filled. The array will be filled after 5 seconds. So the output will be 0 and a string representation of the array array[]. Now because arrays could have tons of data, the console won't show that data until the user unfolds the array. So what the console does is keep a reference to the array until the user press the unfold arrow. If you unfold the array before 5 seconds you'll see that the array is empty (not filled yet). If you wait until the 5 seconds pass then unfold it, then you'll see that it's filled, even though it was logged as an empty array.

Note: Also, the line that get logged to the console (something like > Array(0)) is just a string representation of the object/array at the moment the log happens. It won't get updated if the object/array changes. So that also may seem confusing sometimes.

I hope it's clear now.

Answer 2

Just to expand on @ibrahim-mahrir 's answer, they means like this

function getPaths() {     var dirPath = document.getElementById("mdir").innerHTML;     var filePaths = [];     fs.readdir(dirPath, function(err, dir) {         for (var i = 0, l = dir.length; i < l; i++) {             var filePath = dir[i];             filePaths.push(dirPath + "/" + filePath);         }         console.log(filePaths);         console.log(filePaths.length);     }); }